0% found this document useful (0 votes)

24 views153 pages

Srsconverter

Uploaded by

dev

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

24 views153 pages

Srsconverter

Uploaded by

dev

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 153

Ryan College For Higher Education, Jandawali,

Hanumangarh, Rajasthan, India, 335512

Software requirement
Specification
(SRS Document)

For

Ruki Blog Web Application

By
Ajit 2021/HR51477
Ishita 2021/HR51480
Varandeep 2021/HR51499

Supervisor

Mr. Amardeep Singh

(Assistant Professor of Computer Science Department)

Bachelor of Computer Application (2023-24)

i
Declaration
We hereby declare that the work which is being presented in the B.C.A. Project “Ruki Blog Website
Application”, (ruki) in partial fulfilment of the requirements for the award of the Bachelor of
Computer Applications and submitted to the Department of Computer Science and Applications of
Ryan College for Higher Education, Hanumangerh, is an authentic record of our own work carried
under the supervision of Mr. Amardeep Singh, (Assistant Professor of Computer Science
Department).

The contents of this project report, in full or in parts, have not been submitted to any other institute or
university for the award of any degree.

Approved:

Project Advisor……………………

Head…………………..

Ajit

…………………………………
(Signature)

Date….………………..

Ishita

…………………………………
(Signature)

Date….………………..

Varandeep

…………………………………
(Signature)

Date….………………..

ii
Abstract
The Blog Website System Requirements Specification (SRS) outlines the detailed requirements and
functionalities for the development of a robust and dynamic blog platform using PHP. This document serves
as a comprehensive guide for the design, implementation, and maintenance of the Blog Website, aiming to
provide users with a seamless and interactive experience. The proposed Blog Website will leverage PHP, a
server-side scripting language renowned for its versatility and efficiency, to create a feature-rich platform for
content creation, publication, and interaction. The system will incorporate essential elements such as user
authentication, post management, commenting, and multimedia support to ensure a holistic blogging
experience.

The platform will support the creation of blog posts, enabling authors to express their ideas effectively.
Additionally, readers will have the ability to engage with content through a user-friendly commenting system.
The system's architecture will be designed to prioritize scalability, maintainability, and performance. PHP will
be employed alongside appropriate database management systems to store and retrieve data efficiently. The
use of responsive web design techniques will ensure a seamless user experience across various devices and
screen sizes.

This SRS outlines functional and non-functional requirements, system architecture, user interfaces, and testing
strategies to guide the development team in building a reliable and scalable Blog Website using PHP. The
document aims to facilitate clear communication between stakeholders, developers, and testers throughout the
software development life cycle, ensuring the successful creation of a high-quality and user-friendly blog
platform.

3|Page
ACKNOWLEDGEMENT
The satisfaction which accompanies the successful completion of the project, is incomplete without
the mention of a few names. We take this opportunity to acknowledge the efforts of the many individuals who
helped us to make this project possible.
Firstly, we would like to express our heartfelt appreciation and gratitude to our project guide Mr. Amardeep
Singh, (Assistant Professor), Computer Engineering Department. His vision and execution aimed at
creating a structure, definition and realism around the project and fostered the ideal environment for us to
learn and do. This project is a result of his teaching, encouragement, and inputs in the numerous meetings he
had with us, despite his busy schedule.
The experience was novel one and we would like to thank all the people, who have lent their valuable time
for the completion of the report. Without their consideration it would have been difficult to complete the
report.

4|Page
TABLE OF CONTENTS
1. Introduction…………………………………………………………………7

1.1 Purpose………………………………………………………………7

1.2 Scope…………………………………………………………………7

2. System Features & Requirements………………………………………….8

2.1 System Description……………………………………………………8

2.2 System Architecture……………………………………………………8

3. Functional Requirements……………………………………………………9

3.1 User Registration……………………………………………………….9

3.2 User Profile Management……………………………………………....9

3.3 Content Creation ……………………………………………………….9

3.4 Post Commenting……………………………………………………….9

3.5 Content Moderation…………………………………………………….9

3.6 Responsive Design……………………………………………………...9

3.7 Tagging and Categories…………………………………………………9

3.8 User Feedback Mechanism……………………………………………...9

4. Non-Functional Requirements…………………………………………….10

4.1 Performance………………………………………………………………10

4.2 Security……………………………………………………………………10

4.3 Usability…………………………………………………………………...10

4.4 Reliability………………………………………………………………….10

4.5 Compatibility………………………………………………………………10

5|Page
4.6 Responsiveness…………………………………………………………….10

4.7 Maintainability……………………………………………………………..11

5. User Interface Design………………………………………………………12

5.1 Homepage………………………………………………………………….12

5.2 Navigation………………………………………………………………….12

5.3 Post Display…………………………………………………………………12

5.4 Commenting System…………………………………………………………12

5.5 Feedback Mechanism………………………………………………………..12

6. Constraints………………………………………………………………….13

7. Design And Coding………………………………………………………….14

7.1 Design Aspects………………………………………………………………..14

8. Working………………………………………………………………………151

9. Conclusion……………………………………………………………………152

10. Deployment…………………………………………………………………..153

11. Bibliography………………………………………………………………….153

6|Page
1. Introduction

In an era dominated by digital communication, blogging has emerged as a powerful medium for
individuals and organizations to share thoughts, insights, and information with a global audience.
The development of a sophisticated and user-friendly Blog Website using PHP seeks to harness the
potential of this medium, providing authors with a dynamic platform to articulate their ideas and
engage with a diverse readership.

1.1. Purpose

The purpose of this System Requirements Specification (SRS) is to define the detailed requirements
for the creation of a robust and feature-rich Blog Website using PHP. The system aims to facilitate
seamless content creation, publication, and interaction, enhancing the overall blogging experience
for both authors and readers. By leveraging the versatility of PHP, the goal is to establish a scalable
and efficient platform that fosters user engagement and promotes the dissemination of diverse
content.

1.2. Scope

The scope of the Blog Website encompasses the design and development of a comprehensive web-
based platform. This platform will enable users to create their blog posts securely. The system will
feature user authentication to ensure data privacy and integrity. Readers will have the ability to
interact with the content through a commenting system, fostering a sense of community and
dialogue. The scope further extends to the implementation of responsive web design principles,
ensuring that the Blog Website delivers a consistent and user-friendly experience across various
devices and screen sizes. The system's architecture will prioritize scalability, allowing for future
enhancements and expansions.

This SRS provides a detailed blueprint for the development team, outlining functional and non-
functional requirements, system architecture, user interfaces, and testing strategies. Through
adherence to these specifications, the aim is to create a reliable, scalable, and user-centric Blog
Website that caters to the evolving needs of bloggers and readers alike.

7|Page
2. System Features & Requirements

The success of the Blog Website project hinges on a meticulous understanding and implementation
of its system features and requirements. This section serves as a detailed exploration of the
functionalities and specifications that will define the behaviour, and capabilities of the system. From
fundamental user interactions to the underlying technical architecture, the features and requirements
outlined herein provide a roadmap for the development team, guiding them towards the creation of a
powerful, intuitive, and scalable Blog Website using PHP.

2.1. System Description

The Blog Website will be a dynamic web application that allows users to create their blog posts.
The system will employ PHP for server-side scripting, ensuring the secure handling of user data and
seamless interaction with the database. The front-end will utilize HTML, CSS, and JavaScript to
create an intuitive and responsive user interface.
Authors can create multimedia-rich blog posts, and readers can engage through a commenting
system. The system will prioritize user authentication to protect sensitive information and will
implement features such as search functionality and social media integration for enhanced user
experience.

2.2. System Architecture

The architecture will follow a three-tier model:

1. Presentation Tier:
• User interfaces developed using HTML, CSS, and JavaScript for a responsive design.
• Interaction with the PHP server for dynamic content rendering.
2. Application Tier:
• PHP scripts for server-side processing, user authentication, and business logic.
• Interaction with the database for data retrieval and storage.
3. Data Tier:
• MySQL database for secure and efficient data storage.
• Proper indexing and normalization for optimal database performance.

8|Page
3. Functional Requirements

3.1. User Registration and Authentication:

• Users can register for an account by providing necessary details.
• The system must support secure authentication mechanisms, such as email verification and
password hashing.

3.2. User Profile Management:

• Registered users can create, update, and manage their profiles, including personal
information and profile pictures.

3.3. Content Creation:

• Authenticated users can create blog posts through an intuitive and user-friendly interface.
• The system should support rich text formatting, multimedia embedding, and categorization of
blog posts.

3.4. Post Commenting:

• Users can leave comments on blog posts.
• Comments should support basic formatting and include user avatars/names.

3.5. Content Moderation:

• Admins should have the ability to moderate and manage user-generated content, including
posts and comments.
• Implement filters and moderation tools to prevent spam and inappropriate content.

3.6. Responsive Design:

• The website should adapt to different screen sizes, ensuring a seamless experience across
devices, including desktops, tablets, and smartphones.

3.7. Tagging and Categories:

• Allow authors to tag their posts with relevant keywords and assign categories to facilitate
content organization and navigation.

3.8. User Feedback Mechanism:

• Implement a feedback form or system to collect user suggestions, bug reports, and other
feedback for continuous improvement.

9|Page
4. Non-Functional Requirements
4.1. Performance
• The system shall exhibit responsiveness, with page load times not exceeding [specified time]
under normal operating conditions.
• It should support a scalable architecture, capable of handling a growing user base and an
increasing volume of content.

4.2. Security
• User data must be securely transmitted and stored.
• User authentication and authorization mechanisms must be robust to protect user data and
prevent unauthorized access.
• The system should employ secure coding practices to guard against common web
vulnerabilities, such as SQL injection and cross-site scripting (XSS).

4.3. Usability
• The user interface should be intuitive and user-friendly, with clear navigation and consistent
design elements.
• The system should be accessible, adhering to web accessibility standards (WCAG) to ensure
inclusivity.

4.4. Reliability
• The system should have a high level of availability, with a target uptime of [specified
percentage].
• Regular backups and data integrity checks should be implemented to prevent data loss.

4.5. Compatibility
• The Blog Website should be compatible with major web browsers (Chrome, Firefox, Safari,
and Edge) to ensure a consistent experience for users.
• It should support various devices, including desktops, laptops, tablets, and smartphones, with
a responsive design.

4.6. Responsiveness
The application should be responsive to the user input or to any external interrupt which is of highest
priority and return to same state.

10 | P a g e
4.7. Maintainability
• The system's codebase should be well-documented, with inline comments and comprehensive
documentation for developers.
• Updates and maintenance tasks should be performed with minimal downtime, ensuring
continuous availability.

11 | P a g e
5. User Interface Design
The User Interface (UI) design of the Blog Website is a critical aspect that directly
influences user engagement and satisfaction. A well-crafted and intuitive UI enhances the overall
user experience, making navigation seamless and content consumption enjoyable. The design
principles outlined below ensure a visually appealing and user-friendly interface for both content
creators and consumers:
5.1. Homepage: -
• The homepage should present an aesthetically pleasing layout with a clean and organized
design.
• Include a featured post section to highlight selected content.
• Display recent blog posts in a visually appealing grid or list format.

5.2. Navigation: -
• Implement a clear and easily navigable menu structure for quick access to essential sections,
such as Home, Blog, Categories, and User Profile.
• Provide breadcrumbs or navigation links to help users understand their location within the
site.

5.3. Post Display: -

• Showcase blog posts with an engaging layout, utilizing a combination of images, text, and
formatting.
• Include social sharing buttons for easy dissemination of content.
• Display related posts or suggested readings to encourage further exploration.

5.4. Commenting System: -

• Create a visually appealing comment section with threaded replies for easy conversation.

5.5. Feedback Mechanism: -

• Implement a user-friendly feedback form or mechanism, encouraging users to provide input
on their experience.
• Include tooltips or guidance for users on form fields and actions.

The User Interface design principles outlined above aim to create an engaging, accessible, and intuitive
experience for users interacting with the Blog Website. Iterative testing and user feedback will further refine
and enhance the UI for optimal usability and satisfaction.

12 | P a g e
6. Constraints
While envisioning the development of the Blog Website, several constraints need to be acknowledged and
addressed to ensure the successful implementation of the project. These constraints encompass limitations
and considerations that may impact various aspects of the system development and operation:

• User must have INTERNET connection.

• The project must adhere to a predefined budget, influencing decisions regarding technology
selection, development resources, and feature prioritization.
• A specific timeline or deadline for the project's completion imposes constraints on the
development cycle, requiring efficient planning and execution to meet milestones.
• The use of PHP as the primary server-side scripting language imposes constraints on
technology choices, compatibility, and integration with other systems.
• Compatibility with various web browsers, devices, and operating systems may be constrained
by the need to prioritize certain platforms over others based on user demographics and
preferences.
• Constraints related to content moderation include the availability of human moderators,
automated filtering technologies, and response times for addressing inappropriate or spam
content.
• Constraints related to the implementation of a feedback mechanism include the availability of
resources to analyse and respond to user feedback promptly.
• Constraints related to ongoing updates and improvements include the allocation of resources
for maintenance, bug fixes, and the introduction of new features.

Acknowledging and addressing these constraints from the project's outset is essential for making informed
decisions and ensuring that the Blog Website is developed and maintained successfully within the defined
limitations. Regular assessments and adjustments throughout the development lifecycle will contribute to
the project's overall success.

13 | P a g e
7. Design And Coding
7.1 . Design Aspects: -
7.1.1. General: -
Designing is the most important phase of application development. It requires a careful
planning and thinking the part of the system designer. Designing means to plan how the
various parts are going to achieve the desired goal. It should bed one with at most care
because if the phase contains any error then that will affect the performance of the system, as
a result it may take more processing time, more response time, extra coding workload etc. It
is the first of the three technical activities designing, coding and testing that are required to
build and verify the software.

7.1.2. Design Objectives: -

• Make application user friendly
• Make application compatible
• Make application reliable and understandable.
7.1.3. Design Criteria/Parameters: -
For the UI of ruki Blogs, basic structure is used with is inspired by some default themes of
word press and blogger and created with custom html and CSS along with bootstrap.

Layout of Architecture: -
All the screenshots of pages are listed below:

Figure: Home Page

14 | P a g e
Figure: Footer of home Page

Figure: Menu Bar Figure: Post Article in

Mobile Screen

15 | P a g e
Figure: Contact / feedback in Tablet View

16 | P a g e
Figure: Post Content

Figure: Comment on Post

17 | P a g e
7.2. Coding: -
7.2.1. index.php
<?php
require "config.php";
$data = $conn->query("SELECT * FROM addblog ORDER BY id DESC");
?>
<?php

$meta_info = "IdeaVault is a cutting-edge article site where users worldwide can publish and share
their diverse perspectives. Embracing inclusivity, the platform ensures high-quality content through
advanced moderation. With a multilingual interface, it fosters cross-cultural dialogues, offering a
supportive community for writers to connect and grow. Privacy and data security are paramount,
making IdeaVault a trusted platform for free expression and knowledge exchange.";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="<?php echo $meta_info; ?>">
<title>Idea Vault</title>

<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/fantasque-sans-mono"
type="text/css"/>

<link rel="stylesheet" href="./components/css/header.css">
<link rel="stylesheet" href="./components/css/footer.css">
<link rel="stylesheet" href="./css/component.css">

<link rel="stylesheet" href="./css/style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">

18 | P a g e
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="./components/css/slide-out-panel.css" rel="stylesheet">

</style>
</head>
<body>
<?php require "../Blog/components/header.php"; ?>

<div class="contents_o1">
<div class="next01">
<span>Home</span>
<small>/ Articles</small>
</div>

<div class="grid-container">
<?php while($rows = $data->fetch(PDO::FETCH_OBJ)) :?>
<div class="item1 grid">

19 | P a g e
<div class="contss">
<div class="s1">
<a class="db_category" href="<?php
if ($rows->category === "travel") {echo "travel.php";}
else if ($rows->category === "general") {echo "index.php";}
else if ($rows->category === "art_design") {echo "artDesign.php";}
else if ($rows->category === "beauty") {echo "beauty.php";}
else if ($rows->category === "lifestyle" || $rows->category === "lifstyle") {echo
"lifeStyle.php";}
else if ($rows->category === "select") {echo "index.php";}
?>"><?php echo $rows->category;?></a>
</div>
<div class="db_details">
<p class="db_title"><a href="blogPost.php?id=<?php echo $rows->id; ?>"><?php
echo $rows->title; ?></a></p>
<div class="db_det1">
<p><span><?php echo $rows->firstname . " " .$rows->lastname ?></span></p>
<span><?php echo date('M', strtotime($rows->created_at)) . ',' . date('d',
strtotime($rows->created_at)) . ' ' . date('Y', strtotime($rows->created_at)); ?></span>
</div>
</div>
</div>
</div>

<?php endwhile; ?>

</div>
</div>
<button onclick="topFunction()" class="scroll_up" title="Go to top"><ion-icon name="arrow-
up"></ion-icon></button>

<?php require "../Blog/components/footer.php"; ?>

20 | P a g e
<script src="./components/js/slide-out-panel.js"></script>

<script src="./components/js/index.js"></script>
<script src="./js/script.js"></script>
<script>
var category = document.querySelectorAll(".grid-container .grid .contss .s1 .db_category");
for (let i = 0; i < category.length; i++) {
if (category[i].textContent === "general") {
category[i].style.backgroundColor = "rgb(4,24,28)";
} else if (category[i].textContent === "art&design") {
category[i].style.backgroundColor = "#4E0A1D";
} else if (category[i].textContent === "travel") {
category[i].style.backgroundColor = "#38086E";
} else if (category[i].textContent === "beauty") {
category[i].style.backgroundColor = "purple";
} else {
category[i].style.backgroundColor = "#4E0A1D";
}
}

// trim usage:
const all_title = document.querySelectorAll(".grid-container .grid .contss .db_details .db_title a");
const maxLength = 45;
all_title.forEach(item => {
if (item.textContent.length > maxLength) {
item.textContent = item.textContent.slice(0, maxLength) + "...";
console.log(item.length )
}
});
let scrollBtn = document.querySelector(".scroll_up");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
scrollBtn.style.display = "block";
} else {

21 | P a g e
scrollBtn.style.display = "none";
}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
7.2.2. footer.php
<?php
$navLinks = array (
array( "name"=>"Art & Design",
"url"=>"../Blog/artDesign.php"),
array( "name"=>"Beauty",
"url"=>"../Blog/beauty.php"),
array( "name"=>"Lifestyle",
"url"=>"../Blog/lifeStyle.php"),
array( "name"=>"Travel",
"url"=>"../Blog/travel.php"),
);

$blog_url = "../Blog/postBlog.php";
$subscribe_url = "../Blog/subscribe.php";

$b_slinks = array (
array( "name"=>"Linkedin",
"icon" => "<ion-icon name='logo-Linkedin' class='twitter'></ion-icon>",
"url"=>"https://www.linkedin.com/in/theajitpoonia",
),
array( "name"=>"Github",
"icon" => "<ion-icon name='logo-github' class='github'></ion-icon>",

22 | P a g e
"url"=>"https://github.com/theajitpoonia",
),
array( "name"=>"contact",
"icon" => '<ion-icon name="mail-open" class="instagram"></ion-icon> ',
"url"=>$subscribe_url,
),
);
?>
<footer class="footer">
<form action="">
<span class="stl">Stay in the Loop</span>
<label for="email">Hire the developer</label>

<div class="slinks">
<?php foreach ($b_slinks as $i) { ?>
<li>
<a href="<?php echo $i['url']; ?>" target="<?php
if ($i['name'] === "contact") {
echo "_self";
} else {echo "_blank";}
?>">
<?php echo $i['icon']; ?>
</a>
</li>
<?php } ?>
</div>
</form>
<div class="sec2">
<div class="name">

<span>#Blog Project by Ajit Poonia,Varandeep Kaur and Ishita Gupta</span>
</div>

23 | P a g e
<ul>
<?php foreach ($navLinks as $i) { ?>
<li><a href="<?php echo $i['url']; ?>"><?php echo $i['name'];?></a></li>
<?php } ?>
</ul>
</div>
</footer>

7.2.3. header.php
<?php
$blog_url = "../Blog/postBlog.php";
$subscribe_url = "../Blog/subscribe.php";
$navLinks = array (
array( "name"=>"Home",
"url"=>"../Blog/index.php",
),
array( "name"=>"Art & Design",
"url"=>"../Blog/artDesign.php",
),
array( "name"=>"Beauty",
"url"=>"../Blog/beauty.php",
),
array( "name"=>"Lifestyle",
"url"=>"../Blog/lifeStyle.php",
"title" => "twitter"),
array( "name"=>"Travel",
"url"=>"../Blog/travel.php",
),
);

$socLinks = array (
array( "name"=>"Post an Article",
"icon" => "<ion-icon name='add'></ion-icon>",
"url"=> $blog_url,
24 | P a g e
"title" => "blog"
),
array( "name"=>"Linkedin",
"icon" => "<ion-icon name='logo-linkedin'></ion-icon>",
"url"=>"https://www.linkedin.com/in/theajitpoonia",
"title" => "twitter"
),
array( "name"=>"Github",
"icon" => "<ion-icon name='logo-github'></ion-icon>",
"url"=>"https://github.com/theajitpoonia",
"title" => "github"
),
array( "name"=>"contact",
"icon" => '<ion-icon name="mail-open"></ion-icon>',
"url"=>$subscribe_url,
"title" => "instagram"
),
);
?>
<nav class="nav">
<div class="menu open_nav1">
<div class="bar_cont">
<span class="bar1 bars"></span>
<span class="bar2 bars"></span>
<span class="bar3 bars"></span>
</div>
<p class="logo">Menu</p>

</div>
<div class="links">
<div class="n_logo"><a href="<?php echo $navLinks[0]['url']; ?>">ruki</a></div>
<ul>
<?php foreach ($navLinks as $i) { ?>

25 | P a g e
<li><a href="<?php echo $i['url']; ?>"><?php echo $i['name'];?></a></li>
<?php } ?>
</ul>
</div>
<div class="search">
<a href="<?php echo $subscribe_url; ?>" class="sub"><ion-icon name="mail-unread"></ion-icon>
<span>Contact</span></a>
<a href="<?php echo $blog_url; ?>">Post</a>
</div>
</nav>

<div id="slide-out-panel" class="slide-out-panel">

<header>
<a href="<?php echo $navLinks[0]['url']; ?>"><p>ruki</p></a>
</header>
<section class="side_ud">
<div class="details">
<ul class="side_links">
<?php foreach ($navLinks as $i) { ?>
<li><a href="<?php echo $i['url']; ?>"><?php echo $i['name'];?></a></li>
<?php } ?>
</ul>
<ul class="side_socials">
<?php foreach ($socLinks as $i) { ?>
<li>
<a
href="<?php echo $i['url'] ?>"
class="<?php echo $i['title'] ?>"
target="<?php
if ($i['title'] === "blog") {
echo "_self";
} else {echo "_blank";}
?>"

26 | P a g e
>
<?php echo $i['icon'] ?>
<span><?php echo $i['name'] ?></span>
</a>
</li>
<?php } ?>
<span>By Ajit Poonia,Varandeep Kaur and Ishita Gupta</span>
</a></li>
</ul>
</div>
</section>
</div>

7.2.4.subscribe.php
<?php require "config.php"; ?>
<?php

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
use PHPMailer\PHPMailer\SMTP;

require 'email/src/Exception.php';
require 'email/src/PHPMailer.php';
require 'email/src/SMTP.php';

27 | P a g e
//Create an instance; passing `true` enables exceptions
$mail = new PHPMailer(true);

?>
<?php

$name_name = "name";
$email_name = "email";
$subject_name = "subject";
$message_name = "message";

$name_error = "";
$email_error = "";
$subject_error = "";
$message_error = "";
$email_sent_error = "";

if(isset($_POST["submit"])) {
$naming = $_POST[$name_name];
$email = $_POST[$email_name];
$subject = $_POST[$subject_name];
$messag = $_POST[$message_name];

// email validation
if(empty($email)) {
$email_error = "Email is required!";
} else{
$email = trim($email);
if (!preg_match("/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/", $email)) {
$email_error = "Enter a valid email";
}
}

28 | P a g e
//Name validation
if(empty($naming)) {
$name_error = "Name is required!";
} else {
$naming = trim($naming);
// $naming = htmlspecialchars($naming);
}

//subject validation
if(empty($subject)) {
$subject_error = "Subject is required!";
} else {
$subject = trim($subject);
$subject = htmlspecialchars($subject);
}

//message validation
if(empty($messag)) {
$message_error = "Message is required!";
} else {
$messag = trim($messag);
$messag = htmlspecialchars($messag);
}

//check is theres not error

if(empty($email_error) AND empty($subject_error) AND empty($name_error) AND
empty($message_error)) {

try {

$mail->isSMTP();
$mail->Host = 'smtp.gmail.com';
$mail->SMTPAuth = true;
$mail->Username = '[email protected]';
29 | P a g e
$mail->Password = 'dygrpwomyjhgtine';
$mail->Port = 587;

//Recipients
$mail->setFrom($email, $naming);
$mail->addAddress('[email protected]', 'Ajit Poonia');

//Content
$mail->isHTML(true);
$mail->Subject = $subject;
$mail->Body = 'Name: '. $naming .'<p>Email: '.$email.'</p><p>'.$messag.'</p>';
$mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

$mail->send();
$email_sent_error = "Message Successfully Sent. I will get back to you as soon as possible";

// Wait for 5 seconds

// sleep(5);

// Redirect to "index.php"
// header("Location: index.php");
} catch (Exception $e) {
$email_sent_error = "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

30 | P a g e
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>

<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/fantasque-sans-mono"
type="text/css"/>

<link rel="stylesheet" href="./components/css/header.css">
<link rel="stylesheet" href="./components/css/footer.css">
<link rel="stylesheet" href="./css/component.css">

<link rel="stylesheet" href="./css/style.css">

<link rel="stylesheet" href="./css/subscribe.css">

<div class="contents_o1">
<div class="add_blog_container">
<div class="title">
<span>Contact</span>
<p style="opacity: .5; display: block; font-size: 14px; color: green;"><?php echo $email_sent_error;
?></p>
</div>
<form action="subscribe.php" method="POST" class="post_form">
<div class="pad email">
<div class="dd">
<span class="val_error"><?php echo $name_error; ?></span>
<label for="">Your Name</label>
<input type="text" name="<?php echo $name_name; ?>" placeholder="Your Name..."
value="<?php
if (isset($_POST[$name_name])) {
echo $_POST[$name_name];
};
?>">
</div>
</div>
<div class="pad email">
<div class="dd">
<span class="val_error"><?php echo $email_error; ?></span>
<label for="">Your Email</label>
<input type="text" name="<?php echo $email_name; ?>" placeholder="Your Email..."
value="<?php
if (isset($_POST[$email_name])) {
echo $_POST[$email_name];
};
?>">
</div>
32 | P a g e
</div>
<div class="pad email">
<div class="dd">
<span class="val_error"><?php echo $subject_error; ?></span>
<label for="">Subject</label>
<input type="text" name="<?php echo $subject_name; ?>" placeholder="Subject..."
value="<?php
if (isset($_POST[$subject_name])) {
echo $_POST[$subject_name];
};
?>">
</div>
</div>
<div class="pad email">
<div class="dd">
<span class="val_error"> <?php echo $message_error; ?></span>
<label for="">Message</label>
<textarea id="" name="<?php echo $message_name; ?>" placeholder="Your message..."
style="height:200px; text-align: left;" ></textarea>
</div>
</div>
<input type="submit" value="Send Message" name="submit">
</form>
</div>
</div>
<?php require "../Blog/components/footer.php"; ?>

7.2.5. config.php
<?php

try {
$host = "localhost";
$dbname = "blog_project";
$user = "root";
$pass = "";

$conn = new PDO("mysql: host=$host; dbname=$dbname;", $user, $pass);

$conn -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo "err is: " . $e->getMessage();
}

7.2.6. blogPost.php
<?php

require "config.php";

if(isset($_GET['id'])) {
$id = $_GET['id'];
$selectAll = $conn->query("SELECT * FROM addblog WHERE id !='$id' ORDER BY RAND()
LIMIT 3");
$selectAll->execute();
$bp = $selectAll->fetchAll(PDO::FETCH_OBJ);

$select = $conn->query("SELECT * FROM addblog WHERE id='$id'");

$select->execute();

34 | P a g e
$row = $select->fetch(PDO::FETCH_OBJ);

// add comment
$name = "comment_name";
$details = "comment";

$name_error = "";
$details_error = "";
}

function getThirdParagraph($text) {
// Split the text into paragraphs using double line breaks as the delimiter
$paragraphs = preg_split('/\n\s*\n/', $text);

// Check if we have at least three paragraphs

if (count($paragraphs) >= 3) {
// Get the first three paragraphs and join them back together
$thirdParagraph = implode("\n\n", array_slice($paragraphs, 0, 3));
return $thirdParagraph;
} else {
// If there are less than three paragraphs, return the original text
return $text;
}
}

$meta_info = $row->description;
$trimmed_metaInfo = getThirdParagraph($meta_info);

<!DOCTYPE html>
<html lang="en">

35 | P a g e
<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">
<meta name="description" content="<?php echo $trimmed_metaInfo; ?>">
<title>
<?php
if ($row->category === "travel") {echo "travel - ". $row->title;}
else if ($row->category === "general") {echo "general - ". $row->title;}
else if ($row->category === "art_design") {echo "design - ". $row->title;}
else if ($row->category === "beauty") {echo "beauty - ". $row->title;}
else if ($row->category === "lifestyle") {echo "Lifestyle - ". $row->title;}
else {echo "Idea Vault";}
?>
</title>

<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/fantasque-sans-mono"
type="text/css"/>

<link rel="stylesheet" href="./components/css/header.css">
<link rel="stylesheet" href="./components/css/footer.css">
<link rel="stylesheet" href="./css/component.css">

<link rel="stylesheet" href="./css/style.css">

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="./components/css/slide-out-panel.css" rel="stylesheet">

<link rel="stylesheet" href="./css/showBlog.css">
<link rel="stylesheet" href="./css/showBlogmedia.css">
<link rel="icon" type="image/x-icon" href="logo_dark.png">
<style>
36 | P a g e
.slide-out-panel-container {
background-color: #fafafa;
}
.contents_o1
{
width: 90%;
margin: 100px auto;
}
</style>
</head>
<body>
<?php require "./components/header.php"; ?>

<div class="contents_o1">
<div class="each_post_container">
<div class="back_to_home" onclick=window.history.go(-1);>
<ion-icon name="arrow-back"></ion-icon>
<span>Back</span>
</div>
<div class="sec1">
<div class="title">
<p><?php echo $row->title; ?></p>
<div class="prate">
<span><?php echo $row->firstname . " " .$row->lastname; ?></span>
<span><?php echo date('M', strtotime($row->created_at)) . ',' . date('d', strtotime($row-
>created_at)) . ' ' . date('Y', strtotime($row->created_at)); ?></span>
<a class="category" href="
<?php
if ($row->category === "travel") {echo "travel.php";}
else if ($row->category === "general") {echo "index.php";}
else if ($row->category === "art_design") {echo "artDesign.php";}
else if ($row->category === "beauty") {echo "beauty.php";}
else if ($row->category === "lifestyle") {echo "lifeStyle.php";}
?>"><?php echo $row-> category; ?></a>
37 | P a g e
</div>
</div>
<div class="postless">
<p class="postless_p"><?php echo $row->description; ?></p>
<span class="postless_thanks">thanks for reading :)</span>

</div>
</div>
<div class="back_to_home" onclick=window.history.go(-1);>
<ion-icon name="arrow-back"></ion-icon>
<span>Go Back</span>
</div>

<div class="comment_section">
<span class="comm_title">Comments</span>
<div class="sec1">
<div class="user">
<ion-icon name="person"></ion-icon>
</div>
<form action="" method="POST">
<div>
<span class="error"><?php echo $name_error ?></span>
<input type="text" placeholder="Your Name" name="<?php echo $name ?>">
</div>
<div>
<textarea name="comment" id="" cols="30" rows="10" placeholder="Add a
comment"></textarea>
<span class="error"><?php echo $name_error ?></span>
</div>

<p >Post</p>
</form>
</div>
<div class="sec2">
38 | P a g e
<p class="comm_title">All comments (<span>0</span>)</p>
</div>
</div>

<div class="sec2">
<div class="title">
<span>More articles</span>
</div>
<div class="s2">
<div class="grid-container">
<?php foreach($bp as $i) : ?>
<div class="item1 grid <?php
if ($row->category === "travel") {echo "travel";}
else if ($row->category === "general") {echo "general";}
else if ($row->category === "art_design") {echo "design";}
else if ($row->category === "beauty") {echo "beauty";}
else if ($row->category === "lifstyle") {echo "style";}
?>">
<div class="contss">
<div class="s1">
<a class="db_category" href="<?php
if ($row->category === "travel") {echo "travel.php";}
else if ($row->category === "general") {echo "index.php";}
else if ($row->category === "art_design") {echo "artDesign.php";}
else if ($row->category === "beauty") {echo "beauty.php";}
else if ($row->category === "lifstyle") {echo "lifeStyle.php";}
?>"><?php echo $i->category; ?></a>
</div>
<div class="db_details">
<p class="db_title"><a href="blogPost.php?id=<?php echo $i->id; ?>"><?php
echo $i->title; ?></a></p>
<div class="db_det1">
<p class="to_off"><span><?php echo $i->firstname . " " .$i-
>lastname ?></span></p>

39 | P a g e
<span class="to_date"><?php echo date('M', strtotime($i->created_at)) . ',' .
date('d', strtotime($i->created_at)) . ' ' . date('Y', strtotime($i->created_at)); ?></span>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>

</div>
</div>
<button onclick="topFunction()" class="scroll_up" title="Go to top"><ion-icon name="arrow-
up"></ion-icon></button>

<?php require "../Blog/components/footer.php"; ?>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-

J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="./components/js/slide-out-panel.js"></script>

<script src="./components/js/index.js"></script>

const all_title = document.querySelectorAll(".each_post_container .sec2 .s2 .grid-container .grid

.contss .db_details .db_title a");
const maxLength = 40;
all_title.forEach(item => {
if (item.textContent.length > maxLength) {
item.textContent = item.textContent.slice(0, maxLength) + "...";
console.log(item.length )
}
});

//scroll to top
let scrollBtn = document.querySelector(".scroll_up");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
scrollBtn.style.display = "block";
} else {
scrollBtn.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

41 | P a g e
function getCurrentDateTime() {
const currentDate = new Date();

const dayOfWeek = currentDate.getDay();

const dayOfMonth = currentDate.getDate();
const month = currentDate.getMonth();
const year = currentDate.getFullYear();

const day = dayOfMonth < 10 ? '0' + dayOfMonth : dayOfMonth;

const formattedMonth = (month + 1) < 10 ? '0' + (month + 1) : (month + 1);

const currentTime = currentDate.toLocaleTimeString();

return {
time: currentTime,
dayOfWeek: dayOfWeek,
dayOfMonth: day,
month: formattedMonth,
year: year
};
}

//add comment
var commentCounter = 0;
let addCmtBtn = document.querySelector(".each_post_container .comment_section .sec1 form p");

addCmtBtn.addEventListener("click", ()=> {
//get data from fields
let name = document.querySelector(".each_post_container .comment_section .sec1 form input");

const randomID = generateRandomID(4);

if (name.value === "") {

42 | P a g e
name.value = "User"+randomID;

}
let details = document.querySelector(".each_post_container .comment_section .sec1 form
textarea");
if (details.value === "") {
details.value = "Well done";
}

//create element
let display_cc = document.createElement("div");
display_cc.classList.add("display_cc");
// display_cc.textContent = name.value;

var sec2 = document.querySelector(".each_post_container .comment_section .sec2");

sec2.appendChild(display_cc);

let user = document.createElement("user");

user.classList.add("user");
user.innerHTML = '<ion-icon name="person"></ion-icon>';
display_cc.appendChild(user);

let content = document.createElement("div");

content.classList.add("content");
display_cc.appendChild(content);

let p = document.createElement("p");
content.classList.add("name");
p.textContent = name.value;
content.appendChild(p);

let span = document.createElement("span");

span.classList.add("comment_details");
span.textContent = details.value;
43 | P a g e
content.appendChild(span);

const currentDateTime = getCurrentDateTime();

let small = document.createElement("small");
small.classList.add("comment_date");
small.textContent = currentDateTime.time + " " + currentDateTime.dayOfWeek + "/" +
currentDateTime.month + "/" + currentDateTime.year;
content.appendChild(small);

console.log("Current time:", currentDateTime.time);

console.log("Day of the week:", currentDateTime.dayOfWeek);
console.log("Day of the month:", currentDateTime.dayOfMonth);
console.log("Month:", currentDateTime.month);
console.log("Year:", currentDateTime.year);

commentCounter++;

// Update the counter value in the HTML

var counterElement = document.querySelector(".each_post_container .comment_section .sec2 p
span");
counterElement.textContent = commentCounter;
})

function generateRandomID(length) {
let characters =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let id = '';
for (let i = 0; i < length; i++) {
let randomIndex = Math.floor(Math.random() * characters.length);
id += characters.charAt(randomIndex);
}
44 | P a g e
return id;
}
</script>
</body>
</html>

7.2.7. postBlog.php
<?php require "config.php"; ?>
<?php
$fnameError = "";
$lnameError = "";
$titleError = "";
$descError = "";
$catError = "";

if(isset($_POST["submit"])) {
$fname = $_POST["firstName"];
$lname = $_POST["lastName"];
$title = $_POST["title"];
$desc = $_POST["description"];
$category = $_POST["category"];

// name validation
if(empty($fname)) {
$fnameError = "First name is required!";
} elseif (strlen($fname) < 2) {
$fnameError = "First name too short!";
} elseif (str_word_count($fname) > 1) {
$fnameError = "Enter 1 name";
} else{
$fname = trim($fname);
$fname = htmlspecialchars($fname);
if (!preg_match("/^[A-Za-z]+$/", $fname)) {

45 | P a g e
$fnameError = "Name cannot contain numbers and characters";
}
}
if(empty($lname)) {
$lnameError = "Last name is required!";
} elseif (strlen($lname) < 2) {
$lnameError = "Last name too short!";
} elseif (str_word_count($lname) > 1) {
$lnameError = "Enter 1 name";
} else {
$lname = trim($lname);
$lname = htmlspecialchars($lname);
if (!preg_match("/^[A-Za-z]+$/", $lname)) {
$lnameError = "Name cannot contain numbers and characters";
}
}

//title validation
if(empty($title)) {
$titleError = "Title is required!";
} elseif (strlen($title) < 2) {
$titleError = "Title too short!";
} else {
$title = trim($title);
$title = htmlspecialchars($title);
}

//blog validation
if(empty($desc)) {
$descError = "Blog is required";
} elseif (strlen($desc) < 50) {
$descError = "too short. Minimum of 50 characters";
} else {

46 | P a g e
$desc = htmlspecialchars($desc);
}

if ($category == "select") {
$catError = "please select a category!";
}

//check is theres not error

if(empty($fnameError) AND empty($lnameError) AND empty($titleError) AND empty($descError)
AND empty($catError)) {
$insert = $conn->prepare("INSERT INTO addblog (firstname, lastname, title, category, description)
VALUES (:firstname, :lastname, :title, :category, :description)");
$insert -> execute([
":firstname" => $fname,
":lastname" => $lname,
":title" => $title,
":category" => $category,
":description" => $desc,
]);
header("location: index.php");
}

?>
<!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>Post an Article</title>

<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/fantasque-sans-mono"
type="text/css"/>
47 | P a g e

<link rel="stylesheet" href="./components/css/header.css">
<link rel="stylesheet" href="./components/css/footer.css">
<link rel="stylesheet" href="./css/component.css">

<link rel="stylesheet" href="./css/style.css">

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="./components/css/slide-out-panel.css" rel="stylesheet">

<link rel="Stylesheet" href="./css/validin.css" type="text/css" media="all" />

<link rel="stylesheet" href="./css/validin.css">
<link rel="icon" type="image/x-icon" href="logo_dark.png">

48 | P a g e
<span>Post an Article</span>
</div>
<form action="postBlog.php" method="POST" enctype="multipart/form-data"
class="post_form">
<div class="pad">
<label for="">Your Name</label>
<div class="s1">
<div class="dd">
<span class="val_error"><?php echo $fnameError; ?></span>
<input type="text" name="firstName" placeholder="First name" validate="alpha"
value="<?php
if (isset($_POST["firstName"])) {
echo $_POST["firstName"];
};
?>">
</div>
<div class="dd">
<span class="val_error"><?php echo $lnameError; ?></span>
<input type="text" name="lastName" placeholder="Last name" value="<?php
if (isset($_POST["lastName"])) {
echo $_POST["lastName"];
};
?>">
</div>
</div>
</div>
<div class="pad email ">
<div class="dd">
<span class="val_error"><?php echo $catError; ?></span>
<label for="">Category</label>
<select name="category" id="category" class="category">
<option value="select" selected>Please Select</option>
<option value="art_design" >Art and Design</option>
<option value="beauty">Beauty</option>

49 | P a g e
<option value="lifestyle">Life Style</option>
<option value="travel">Travel</option>
<option value="general">General</option>
</select>
</div>
</div>
<div class="pad email">
<div class="dd">
<span class="val_error"><?php echo $titleError; ?></span>
<label for="">Blog Title</label>
<input type="text" name="title" placeholder="title" value="<?php
if (isset($_POST["title"])) {
echo $_POST["title"];
};
?>">
</div>
</div>
<div class="pad email">
<div class="dd">
<span class="val_error"><?php echo $descError; ?></span>
<textarea id="" name="description" placeholder="Type or paste here..."
style="height:200px"><?php if (isset($_POST["description"])) {
echo $_POST["description"];
}; ?></textarea>
</div>
</div>
<input type="submit" value="Post blog" name="submit">

</form>
</div>
</div>
<?php require "../Blog/components/footer.php"; ?>

50 | P a g e
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="./components/js/slide-out-panel.js"></script>

<script src="./components/js/index.js"></script>
<script src="./js/script.js"></script>

// image uploader
function showPreview(event){
if(event.target.files.length > 0){
var src = URL.createObjectURL(event.target.files[0]);
var preview = document.getElementById("file-ip-1-preview");
preview.src = src;
preview.style.display = "block";
}}
</script>
</body>
</html>

7.2.8.artDesign.php
<?php

require "config.php";
$data = $conn->query("SELECT * FROM addblog WHERE category = 'art_design' ORDER BY
id DESC");

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

51 | P a g e
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Art and Design</title>

<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/fantasque-sans-mono"
type="text/css"/>

<link rel="stylesheet" href="./components/css/header.css">
<link rel="stylesheet" href="./components/css/footer.css">
<link rel="stylesheet" href="./css/component.css">

<link rel="stylesheet" href="./css/style.css">

<link rel="stylesheet" href="./css/getblog.css">

52 | P a g e
</style>
</head>
<body>
<?php require "../Blog/components/header.php"; ?>

<div class="contents_o1">
<div class="next01">
<span>Art & Design</span>
<small>/ Articles</small>
</div>

<div class="grid-container">
<?php while($rows = $data->fetch(PDO::FETCH_OBJ)) : ?>
<div class="item1 grid">
<div class="contss">
<div class="s1">
<a class="db_category" href="<?php
if ($rows->category === "travel") {echo "travel.php";}
else if ($rows->category === "general") {echo "index.php";}
else if ($rows->category === "art_design") {echo "artDesign.php";}
else if ($rows->category === "beauty") {echo "beauty.php";}
else if ($rows->category === "lifstyle") {echo "lifeStyle.php";}
?>"><?php echo $rows->category; ?></a>
</div>
<div class="db_details">
<p class="db_title"><a href="blogPost.php?id=<?php echo $rows->id; ?>"><?php
echo $rows->title; ?></a></p>
<div class="db_det1">
<p>By <span><?php echo $rows->firstname . " " .$rows-
>lastname ?></span></p>
<span><?php echo date('M', strtotime($rows->created_at)) . ',' . date('d',
strtotime($rows->created_at)) . ' ' . date('Y', strtotime($rows->created_at)); ?></span>
</div>
</div>
</div>
53 | P a g e
</div>

<?php endwhile; ?>

</div>
</div>
<?php require "../Blog/components/footer.php"; ?>

// trim usage:
const all_title = document.querySelectorAll(".grid-container .grid .contss .db_details .db_title a");
const maxLength = 45;

54 | P a g e
all_title.forEach(item => {
if (item.textContent.length > maxLength) {
item.textContent = item.textContent.slice(0, maxLength) + "...";
console.log(item.length )
}
});

//if only one item

const aGrid = document.querySelectorAll(".each_post_container .sec2 .s2 .grid-container .grid");
for (let i = 0; i < aGrid.length; i++) {
if (aGrid.length < 2) {
console.log("yes")
} console.log("no");
}
</script>
</body>
</html>

7.2.9. beauty.php
<?php

require "config.php";
$data = $conn->query("SELECT * FROM addblog WHERE category = 'beauty' ORDER BY id
DESC");

55 | P a g e
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/fantasque-sans-mono"
type="text/css"/>

<link rel="stylesheet" href="./components/css/header.css">
<link rel="stylesheet" href="./components/css/footer.css">
<link rel="stylesheet" href="./css/component.css">

<link rel="stylesheet" href="./css/style.css">

<div class="contents_o1">
56 | P a g e
<div class="next01">
<span>Beauty</span>
<small>/ Articles</small>
</div>

<?php endwhile; ?>

</div>
</div>
<?php require "../Blog/components/footer.php"; ?>
57 | P a g e

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="./components/js/slide-out-panel.js"></script>

<script src="./components/js/index.js"></script>
<script src="./js/script.js"></script>
<script>
var category = document.querySelectorAll(".grid-container .grid .contss .s1 .db_category");
for (let i = 0; i < category.length; i++) {
if (category[i].textContent === "general") {
category[i].style.backgroundColor = "rgb(4,24,28)";
} else if (category[i].textContent === "art&design") {
category[i].style.backgroundColor = "#4E0A1D";
} else if (category[i].textContent === "travel") {
category[i].style.backgroundColor = "#38086E";
} else if (category[i].textContent === "beauty") {
category[i].style.backgroundColor = "purple";
} else {
category[i].style.backgroundColor = "#4E0A1D";
}
}

58 | P a g e
//if only one item
const aGrid = document.querySelectorAll(".each_post_container .sec2 .s2 .grid-container .grid");
for (let i = 0; i < aGrid.length; i++) {
if (aGrid.length < 2) {
console.log("yes")
} console.log("no");
}
</script>
</body>
</html>

7.2.10. lifeStyle.php

<?php

require "config.php";
$data = $conn->query("SELECT * FROM addblog WHERE category = 'lifestyle' ORDER BY id
DESC");

59 | P a g e
<link rel="stylesheet" href="./css/component.css">

<link rel="stylesheet" href="./css/style.css">

<link rel="stylesheet" href="./css/getblog.css">

<div class="contents_o1">
<div class="next01">
<span>Lifestyle</span>
<small>/ Articles</small>

60 | P a g e
</div>
<div class="grid-container">
<?php while($rows = $data->fetch(PDO::FETCH_OBJ)) : ?>
<div class="item1 grid">
<div class="contss">
<div class="s1">
<a class="db_category" href="<?php
if ($rows->category === "travel") {echo "travel.php";}
else if ($rows->category === "general") {echo "index.php";}
else if ($rows->category === "art_design") {echo "artDesign.php";}
else if ($rows->category === "beauty") {echo "beauty.php";}
else if ($rows->category === "lifstyle") {echo "lifeStyle.php";}
?>"><?php echo $rows->category; ?></a>
</div>
<div class="db_details">
<p class="db_title"><a href="blogPost.php?id=<?php echo $rows->id; ?>"><?php
echo $rows->title; ?></a></p>
<div class="db_det1">
<p>By <span><?php echo $rows->firstname . " " .$rows-
>lastname ?></span></p>
<span><?php echo date('M', strtotime($rows->created_at)) . ',' . date('d',
strtotime($rows->created_at)) . ' ' . date('Y', strtotime($rows->created_at)); ?></span>
</div>
</div>
</div>
</div>

<?php endwhile; ?>

</div>
</div>
<?php require "../Blog/components/footer.php"; ?>

61 | P a g e
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="./components/js/slide-out-panel.js"></script>

<script src="./components/js/index.js"></script>
<script src="./js/script.js"></script>
<script>
var category = document.querySelectorAll(".grid-container .grid .contss .s1 .db_category");
for (let i = 0; i < category.length; i++) {
if (category[i].textContent === "general") {
category[i].style.backgroundColor = "rgb(4,24,28)";
} else if (category[i].textContent === "art&design") {
category[i].style.backgroundColor = "#4E0A1D";
} else if (category[i].textContent === "travel") {
category[i].style.backgroundColor = "#38086E";
} else if (category[i].textContent === "beauty") {
category[i].style.backgroundColor = "purple";
} else {
category[i].style.backgroundColor = "#4E0A1D";
}
}

//if only one item

62 | P a g e
const aGrid = document.querySelectorAll(".each_post_container .sec2 .s2 .grid-container .grid");
for (let i = 0; i < aGrid.length; i++) {
if (aGrid.length < 2) {
console.log("yes")
} console.log("no");
}
</script>
</body>
</html>

7.2.11. travel.php
<?php

require "config.php";
$data = $conn->query("SELECT * FROM addblog WHERE category = 'travel' ORDER BY id
DESC");

63 | P a g e

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="./components/css/slide-out-panel.css" rel="stylesheet">

<link rel="stylesheet" href="./css/getblog.css">

<div class="contents_o1">
<div class="next01">
<span>Travel</span>
<small>/ Articles</small>
</div>
<div class="grid-container">
<?php while($rows = $data->fetch(PDO::FETCH_OBJ)) : ?>

64 | P a g e
<div class="item1 grid">
<div class="contss">
<div class="s1">
<a class="db_category" href="<?php
if ($rows->category === "travel") {echo "travel.php";}
else if ($rows->category === "general") {echo "index.php";}
else if ($rows->category === "art_design") {echo "artDesign.php";}
else if ($rows->category === "beauty") {echo "beauty.php";}
else if ($rows->category === "lifstyle") {echo "lifeStyle.php";}
?>"><?php echo $rows->category; ?></a>
</div>
<div class="db_details">
<p class="db_title"><a href="blogPost.php?id=<?php echo $rows->id; ?>"><?php
echo $rows->title; ?></a></p>
<div class="db_det1">
<p>By <span><?php echo $rows->firstname . " " .$rows-
>lastname ?></span></p>
<span><?php echo date('M', strtotime($rows->created_at)) . ',' . date('d',
strtotime($rows->created_at)) . ' ' . date('Y', strtotime($rows->created_at)); ?></span>
</div>
</div>
</div>
</div>

<?php endwhile; ?>

</div>
</div>
<?php require "../Blog/components/footer.php"; ?>

65 | P a g e
<script src="./components/js/index.js"></script>
<script src="./js/script.js"></script>
<script>
var category = document.querySelectorAll(".grid-container .grid .contss .s1 .db_category");
for (let i = 0; i < category.length; i++) {
if (category[i].textContent === "general") {
category[i].style.backgroundColor = "rgb(4,24,28)";
} else if (category[i].textContent === "art&design") {
category[i].style.backgroundColor = "#4E0A1D";
} else if (category[i].textContent === "travel") {
category[i].style.backgroundColor = "#38086E";
} else if (category[i].textContent === "beauty") {
category[i].style.backgroundColor = "purple";
} else {
category[i].style.backgroundColor = "#4E0A1D";
}
}

//if only one item

const aGrid = document.querySelectorAll(".each_post_container .sec2 .s2 .grid-container .grid");
for (let i = 0; i < aGrid.length; i++) {
if (aGrid.length < 2) {
console.log("yes")

66 | P a g e
} console.log("no");
}
</script>
</body>
</html>

CSS: -
7.2.12. header.css
.nav
{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: var(--dark-blue);
padding: 15px 0px;
position: fixed;
width: 100%;
top: 0;
z-index: 200;
}

.nav .menu
{
display: flex;
flex-direction: row;
justify-content: space-between;
cursor: pointer;
place-content: center;
align-items: center;
padding: 8px 15px;
border-radius: 8px;
transition: 0.3s ease-in-out;
67 | P a g e
margin-left: 50px;
}
.nav .menu .bar_cont
{
display: flex;
flex-direction: column;
width: 30px;
}
.nav .menu .bar_cont >span
{
height: 2px;
background-color: var(--text-color-light);
margin: 2.3px;
}
.nav .menu .bar_cont .bar2 { width: 70%; }
.nav .menu .bar_cont .bar3 { width: 50%; }
.nav .menu .logo
{
display: block;
margin-left: 10px;
color: var(--text-color-light);
}
.nav .menu:hover
{
background-color: rgb(20, 20, 20);
}

.nav .links
{
/* background-color: red; */
padding: 5px;
}
.nav .links .n_logo {display: none;}

68 | P a g e
.nav .links ul
{
display: flex;
flex-direction: row;
}
.nav .links ul li a
{
word-spacing: -4px;
display: block;
text-align: center;
padding: 6px 15px;
color: var(--text-color-light);
}

nav .search {
display: flex;
margin-right: 50px;
}
nav .search a
{
background-color: var(--pink-color-button);
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 6px 15px;
margin: 0px 5px;
color: var(--text-color-light);
}
.nav .search .sub i,
.nav .search .sub ion-icon
{
color: var(--text-color-light);

69 | P a g e
}
.nav .search .sub span
{
margin-left: 10px;
color: var(--text-color-light);
}

@media (max-width: 1028px) {

.nav .search {
margin-right: 10px;
}
.nav .menu
{
margin-left: 10px;
}
}

@media (max-width: 940px) {

.nav {
/* display: block; */
padding: 0px;
}
.nav .menu
{
/* background-color: red; */
flex-direction: row;
justify-content: unset;
align-items: flex-start;
}
.nav .menu .bar_cont > span { height: 3px; }
.nav .menu .logo {display: none;}
.nav .links .n_logo {display: block;}
.nav .search .sub {display: none;}

70 | P a g e
.nav .links .n_logo a{
font-family: var(--pop-text);
font-size: 2em;
font-weight: 900;
color: var(--text-color-light);
}
.nav .links ul {display: none;}

@media (max-width: 500px) {

.nav .menu
{
margin-left: 10px;
display: unset;
padding: 0;
}
.nav .menu:hover
{
background-color: transparent;
}
}

7.2.13. footer.css
.footer
{
/* position: fixed;
bottom: 0; */
width: 100%;

background-color: var(--dark-blue);
display: flex;

71 | P a g e
flex-direction: column;
padding: 20px;
}
.footer form
{
display: flex;
flex-direction: column;
align-items: center;
}
.footer form span
{
display: block;
font-size: 2.4em;
font-weight: 500;
letter-spacing: -2px;
font-family: var(--pop-text);
color: var(--text-color-light);
padding: 20px;
}
.footer form label
{
display: block;
color: var(--text-color-light);
opacity: .6;
}

.footer form .email_container

{
width: 100%;
display: flex;
flex-direction: row;
place-content: center;
margin-top: 30px;

72 | P a g e
}
.footer form .email_container input
{
box-sizing: border-box;
width: 500px;
padding: 14px 26px;
border: none;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.footer form .email_container button
{
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border: none;
padding: 14px 26px;
cursor: pointer;
font-size: 16px;
background-color: var(--pink-color-button);
color: var(--text-color-light);
}
.footer form .slinks
{
display: flex;
margin-top: 30px;
}
.footer form .slinks ion-icon
{
margin: 6px;
padding: 15px;
border-radius: 50px;
font-size: 16px;
color: var(--text-color-light);

73 | P a g e
}

.footer form .slinks a .twitter {background-color: #1DA1F2;}

.footer form .slinks a .github {background-color: #130636;}
.footer form .slinks a .instagram {background-color: #E1306C;}
.footer form .slinks a .tiktok {background-color: black;}

.footer .sec2
{
display: flex;
flex-direction: row;
justify-content: space-between;
/* background-color: grey; */
padding: 0px 30px;
margin-top: 50px;
}
.footer .sec2 .name
{
}
.footer .sec2 .name span
{
color: var(--text-color-light);
}
.footer .sec2 ul
{
display: flex;
flex-direction: row;
}
.footer .sec2 ul a
{
margin: 0px 20px;
color: var(--text-color-light);
}

74 | P a g e
@media (max-width: 790px) {
.footer { padding-bottom: 20px; }
.footer .sec2 .name {font-size: 12px;}
.footer .sec2 ul a {font-size: 12px; margin: 0 10px;}
.footer form .slinks ion-icon {padding: 10px;}
.footer form .email_container input
{
width: 400px;
padding: 0px 20px;
}
.footer form .email_container button
{
padding: 10px 20px;
font-size: 16px;
}
}
@media (max-width: 600px)
{
.footer {
padding: 10px;
}
.footer form { align-items: flex-start; }
.footer form .email_container { flex-direction: column; }
.footer form .email_container input
{
padding: 10px 20px;
border-radius: 50px;
width: 300px;
box-sizing: border-box;
}
.footer form .email_container button
{

75 | P a g e
margin-top: 10px;
width: 100px;
border-radius: 50px;
}
.footer form span { padding-left: 0; }
footer form label
{
font-size: 12px;
}
.footer .sec2
{
flex-direction: column-reverse;
padding: 0 1px;

}
.footer .sec2 ul
{
padding: 0;
justify-content: space-between;
width: 90%;
margin-bottom: 20px;
display: block;
}
.footer .sec2 ul a
{
margin: 5px 0;
}
.footer .sec2
{
margin-top: 20px;
}
.footer form span
{

76 | P a g e
font-size: 1.7em;
}
}

7.2.14. slide-out-panel.css
html {
width: 100%;
}
@media all and (max-width: 768px) {
html {
width: 100% !important;
}
}
html.slide-out-top {
bottom: initial !important;
top: 0;
}
html.slide-out-right {
left: 0;
right: initial !important;
}
html.slide-out-bottom {
bottom: 0;
top: initial !important;
}
html.slide-out-left {
left: initial !important;
right: 0;
}

.slide-out-panel-container {
/* background-color: #c42525; */
bottom: 0;

77 | P a g e
box-shadow: -3px 3px 9px rgba(0, 0, 0, 0.3);
height: auto;
max-width: 100vw;
overflow-y: auto;
position: fixed;
top: 0;
transition: top ease, right ease, bottom ease, left ease;
z-index: 9999;
}
@media all and (max-width: 768px) {
.slide-out-panel-container.open {
width: 300px !important;
}
}
.slide-out-panel-container * {
box-sizing: border-box;
}
.slide-out-panel-container .close-slide-out-panel {
color: var(--text-color-dark);
cursor: pointer;
font-size: 12px;
font-weight: bold;
height: auto;
line-height: 12px;
min-height: 12px;
min-width: 12px;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.35s ease;
width: auto;
z-index: 9999;

78 | P a g e
}
.slide-out-panel-container .slide-out-header,
.slide-out-panel-container .slide-out-content,
.slide-out-panel-container .slide-out-footer {
padding: 15px;
position: relative;
width: 100%;
}
.slide-out-panel-container .slide-out-header {
align-items: center;
background-color: inherit;
}
.slide-out-panel-container .slide-out-header p
{
display: block;
font-family: var(--pop-text);
font-size: 2em;
font-weight: 900;
color: var(--text-color-dark);
letter-spacing: -2px;
}
.slide-out-panel-container .slide-out-content
{
/* background-color: #818181; */
display: flex;
flex-direction: column;
}
.slide-out-panel-container .slide-out-content .side_links li a
{
padding: 8px 8px 8px 0px;
text-decoration: none;
font-size: 20px;
display: block;

79 | P a g e
transition: 0.3s;
letter-spacing: -1px;
color: var(--text-color-dark);
border-bottom: 1px solid rgba(78, 78, 78, 0.13);
transition: 0.3s;
}
.slide-out-panel-container .slide-out-content .side_links li a:hover
{
background-color: #f1f1f1;
}
.slide-out-panel-container .slide-out-content .side_socials
{
/* background-color: green; */
margin-top: 2em;
}

.slide-out-panel-container .slide-out-content .side_socials li a

{
border-radius: 50px;
padding: 8px 20px;
text-decoration: none;
font-size: 16px;
display: block;
transition: 0.3s;
letter-spacing: -1px;
color: var(--text-color-light);
transition: 0.3s;
margin: 10px 0;
align-items: center;
justify-content: center;
}
.slide-out-panel-container .slide-out-content .side_socials li a span,
.slide-out-panel-container .slide-out-content .side_socials li a ion-icon

80 | P a g e
{
color: var(--text-color-light);
}
.slide-out-panel-container .slide-out-content .side_socials li .blog {background-color: var(--pink-color-
button);}
.slide-out-panel-container .slide-out-content .side_socials li .twitter {background-color: #1DA1F2;}
.slide-out-panel-container .slide-out-content .side_socials li .github {background-color: #130636;}
.slide-out-panel-container .slide-out-content .side_socials li .instagram {background-color: #E1306C;}
.slide-out-panel-container .slide-out-content .side_socials li .tiktok {background-color: black;}
.slide-out-panel-container .slide-out-content .side_socials li .discord {background-color: #7289DA;}
.slide-out-panel-container .slide-out-content .side_socials li .by_pe1 {
padding-left: 0px;
}
.slide-out-panel-container .slide-out-content .side_socials li .by_pe1 span{
color: var(--text-color-dark);
font-size: 14px;
opacity: .6;
}

.slide-out-panel-container .slide-out-content.no-header {
padding-top: 30px;
}
.slide-out-panel-container .slide-out-content.no-header .close-slide-out-panel {
display: block;
}
.slide-out-panel-container .slide-out-content .close-slide-out-panel {
display: none;
position: absolute;
top: 15px;
}
.slide-out-panel-container .slide-out-footer {
color: var(--black);
}
.slide-out-panel-container .slide-out-footer span
81 | P a g e
{
color: var(--black);
font-size: 12px;
opacity: .5;
}

.slide-out-panel {
display: none;
}

.slide-out-panel-screen {
height: 100vh;
left: 0;
opacity: 0;
position: fixed;
top: 0;
transition: opacity ease;
width: 100vw;
}
@media all and (max-width: 768px) {
.slide-out-panel-screen {
height: 100%;
}
}

/* Chrome, Edge and Safari */

*::-webkit-scrollbar {
width: 5px;
width: 5px;
}
*::-webkit-scrollbar-track {
border-radius: 5px;
background-color: #DFE9EB;

82 | P a g e
}

*::-webkit-scrollbar-track:hover {
background-color: #B8C0C2;
}

*::-webkit-scrollbar-track:active {
background-color: #B8C0C2;
}

*::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: var(--pink-color-button);
}

7.2.15. component.css
/* @import
url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,600
&display=swap'); */
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
*{
padding: 0;
margin: 0;
list-style-type: none;
text-decoration: none;
font-family: 'FantasqueSansMonoRegular';
font-weight: normal;
font-style: normal;
/* font-family: 'Josefin Sans', sans-serif; */
/* font-family: 'Poppins', sans-serif; */
color: var(--text-color-dark);

83 | P a g e
:root {
--text-color-dark: rgb(22, 22, 22);
--text-color-light: rgb(255, 255, 255);
--dark-blue: rgb(46,47,51);
--pink-color-background: rgb(255,247,243);
--pink-color-button: rgb(252, 168, 135);

--general-text: 'Helvetica Neue', sans-serif;

--pop-text: 'Poppins', sans-serif;

}
body
{
scroll-behavior: smooth;
}

7.2.16. getblog.css
.next01
{
margin: 10px;
width: 90%;
margin: auto;
padding: 0 10px;
margin-top: 20px;
margin-bottom: 10px;
/* display: block; */
}
.next01 span
{
font-size: 1.5em;
font-weight: bold;
font-family: var(--pop-text);

84 | P a g e
}
.next01 small
{
/* display: block; */
font-size: 12px;
}

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
padding: 0px;
gap: 30px;
width: 90%;
max-width: 90%;
margin: auto;
margin-top: 20px;
}
.grid-container .grid
{
margin: auto;
border-radius: 10px;
/* background-color: var(--pink-color-button); */
background-color: pink;
font-size: 30px;
height: 250px;
/* width: 320px; */
overflow: hidden;
border: 1px solid var(--dark-blue);
transition: 0.3 ease-in-out;
}
.grid-container .grid:hover{
/* background-color: pink; */
background-color: var(--pink-color-button);

85 | P a g e
}
.grid-container .grid .contss
{
height: 100%;
text-align: left;
padding: 20px;

display: flex;
flex-direction: column;
justify-content: space-between;
}
.grid-container .grid .contss .s1
{
/* justify-items: center; */
}
.grid-container .grid .contss .db_details
{
/* justify-items: center; */

}
.grid-container .grid .contss .s1 .db_category
{
/* width: fit-content; */
padding: 3px 10px;
border-radius: 10px;
font-size: 14px;
color: var(--text-color-light);
text-align: center;
/* background-color: green; */
text-transform: capitalize;
}

.grid-container .grid .contss .db_details

86 | P a g e
{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.grid-container .grid .contss .db_details .db_title a
{
font-size: 1.4em;
font-weight: 700;
color: var(--dark-blue);
transition: 0.3s;
}
.grid-container .grid .contss .db_details .db_title a:hover
{
text-decoration: underline;
}
.grid-container .grid .contss .db_details .db_det1
{
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.grid-container .grid .contss .db_details p
{
font-size: 16px;
}
.grid-container .grid .contss .db_details p span {font-weight: 600;}
.grid-container .grid .contss .db_details span {font-size: 16px;}
body
{
color: rgb(59, 201, 66)
}

87 | P a g e
@media (max-width: 1000px) {
.grid-container { gap: 10px; width: 100%;}
.grid-container .grid { height: 220px; }
.grid-container .grid .contss{padding: 10px;}
.grid-container .grid .contss .s1 .db_category {padding: 3px 7px; font-size: 12px;}
.grid-container .grid .contss .db_details .db_title a {font-size: 1.25em;}
.grid-container .grid .contss .db_details .db_det1 {margin-top: 10px;}
.grid-container .grid .contss .db_details .db_det1 p {display: none;}
.grid-container .grid .contss .db_details span {font-size: 12px;}
}

@media (max-width: 800px) {

.grid-container .grid { height: 150px; }
.grid-container { grid-template-columns: auto auto; gap: 20px;}
.grid-container .grid .contss .s1 .db_category {padding: 2px 7px;}
.grid-container .grid .contss .db_details .db_det1 p { font-size: 12px; }
.grid-container .grid .contss .db_details .to_off {display: none;}
.grid-container .grid .contss .db_details span {font-size: 10px;}

@media (max-width: 530px) {

.grid-container { grid-template-columns: auto;gap: 10px;}
.grid-container .grid {width: 100%; height: 90px; }
.grid-container .grid .contss { display: block; padding: 9px;}
.grid-container .grid .contss .db_details {margin: 0;}
.grid-container .grid .contss .db_details .db_title a {font-size: 1.12em;}
.grid-container .grid .contss .s1 .db_category {
font-size: 10px;
position: absolute;
}
.grid-container .grid .contss .db_details .to_date {margin: 0;}
.grid-container .grid .contss .db_details .db_det1 {margin-top: 5px; margin-left: auto;}

88 | P a g e
.grid-container .grid .contss
{
display: flex;
justify-content: space-between;
padding: 5px;
}
}

.scroll_up
{
border: none;
cursor: pointer;
position: fixed;
right: 15px;
bottom: 10px;
background: inherit;
}
.scroll_up ion-icon
{
font-size: 20px;
color: #fff;
padding: 10px;
background-color: var(--pink-color-button);
border-radius: 50px;
border: 1px solid #fff;

7.2.17. showblog.css
.each_post_container
{
display: flex;
flex-direction: column;

89 | P a g e
justify-content: space-between;
position: relative;
padding-top: 50px;
width: 80%;
margin: auto;
}
.each_post_container .sec1
{
display: block;
/* background-color: var(--pink-color-button); */
margin: 10px;
padding: 20px;
border-radius: 10px;
}
.each_post_container .sec1 .title { display: block; }
.each_post_container .sec1 .title p
{
font-size: 2.1em;
font-weight: 600;
font-family: var(--pop-text);
line-height: 40px;
}
.each_post_container .sec1 .prate{
margin-top: 15px;
line-height: unset;
}
.each_post_container .sec1 .prate span{
margin-right: 5px;
font-size: 14px;
opacity: .5;
}
.each_post_container .sec1 .prate .category
{

90 | P a g e
padding: 3px 14px;
border-radius: 50px;
font-size: 16px;
color: #fff;
text-align: center;
opacity: 1;
background-color: red;
}
.each_post_container .sec1 .postless
{
margin-top: 40px;
}
.each_post_container .sec1 .postless p
{
font-size: 16px;
word-spacing: 10px;
line-height: 30px;
opacity: .8;
}
.each_post_container .sec1 .postless .read_more_target
{
/* display: none; */
}
.each_post_container .sec1 .postless .show-more .postless_dots
{
display: none;
}
.each_post_container .sec1 .postless .show-more
{
display: inline;
}
.each_post_container .sec1 .postless .postless_thanks
{

91 | P a g e
display: block;
margin-top: 20px;
opacity: .5;
text-decoration: underline;
}
.each_post_container .sec1 .postless .readMoreBtn
{
width: auto;
margin-bottom: 3em;
padding: .8em 1.4em;
transition: opacity .2s ease-in-out;
background-color: var(--dark-blue);
border: none;
border-radius: 10px;
margin-top: 10px;
color: #fff;
}
.each_post_container .sec1 .postless .readMoreBtn span,
.each_post_container .sec1 .postless .readMoreBtn ion-icon
{
font-size: 1em;
color: #fff;

}
.each_post_container .sec1 .postless .readMoreBtn:hover
{ background-color: var(--pink-color-button); cursor: pointer; }

.each_post_container .sec1 .postless .readMoreBtn:hover ion-icon,

.each_post_container .sec1 .postless .readMoreBtn:hover span
{color: var(--dark-blue);}

.each_post_container .sec2
{

92 | P a g e
display: flex;
flex-direction: column;
padding: 30px;
}
.each_post_container .sec2 .title
{
margin-bottom: 20px;
}
/* .each_post_container .sec2 .s2
{

} */
.each_post_container .sec2 .s2 .grid-container {
display: grid;
grid-template-columns: auto auto auto;
padding: 0px;
gap: 30px;
/* background-color: red; */
}
.each_post_container .sec2 .s2 .grid-container .travel {background-color: yellow;}
.each_post_container .sec2 .s2 .grid-container .general {background-color: var(--pink-color-button);}
.each_post_container .sec2 .s2 .grid-container .design {background-color: pink;}
.each_post_container .sec2 .s2 .grid-container .beauty {background-color: greenyellow;}
.each_post_container .sec2 .s2 .grid-container .style {background-color: red;}

.each_post_container .sec2 .s2 .grid-container .grid

{
border-radius: 10px;
/* background-color: var(--pink-color-button); */
background-color: pink;
font-size: 30px;
overflow: hidden;
border: 1px solid var(--dark-blue);
93 | P a g e
transition: 0.3 ease-in-out;
transition: 0.3s ease-in-out;
}
.each_post_container .sec2 .s2 .grid-container .grid:hover{
/* background-color: pink; */
background-color: var(--pink-color-button);
}
.each_post_container .sec2 .s2 .grid-container .grid .contss
{
height: 100%;
text-align: left;
padding: 15px;

display: flex;
flex-direction: column;
justify-content: space-between;
}
.each_post_container .sec2 .s2 .grid-container .grid .contss .s1
{
justify-items: center;
}
/* .each_post_container .sec2 .s2 .grid-container .grid .contss .db_details
{

} */
.each_post_container .sec2 .s2 .grid-container .grid .contss .s1 .db_category
{
padding: 2px 7px;
border-radius: 50px;
font-size: 12px;
color: var(--text-color-light);
text-align: center;
/* background-color: green; */

94 | P a g e
}

.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details

{
display: flex;
flex-direction: column;
/* justify-content: space-between; */
margin-top: 20px;
}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details .db_title a
{
font-size: .6em;
font-weight: 700;
color: var(--dark-blue);
transition: 0.3s;
line-height: -30px;
}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details .db_title a:hover
{
text-decoration: underline;
}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details .db_det1
{
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details .db_det1 p
{
font-size: 12px;
}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details p span {font-weight: 600;}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details span {font-size: 12px;}

95 | P a g e
.back_to_home
{
cursor: pointer;
width: fit-content;
margin-left: 30px;
}
.back_to_home span,
.back_to_home ion-icon
{
font-size: 12px;
color: black;
opacity: .6;
}
.scroll_up
{
border: none;
cursor: pointer;
position: fixed;
right: 15px;
bottom: 10px;
background: inherit;
}
.scroll_up ion-icon
{
font-size: 20px;
color: #fff;
padding: 10px;
background-color: var(--pink-color-button);
border-radius: 50px;
border: 1px solid #fff;

96 | P a g e
.each_post_container .comment_section
{
/* background-color: var(--pink-color-button); */
display: flex;
flex-direction: column;
padding: 30px;
}
.each_post_container .comment_section .sec1
{
padding: 0;
display: flex;
flex-direction: row;
transform: translateX(-10px);
}
.each_post_container .comment_section .sec1 .user
{
/* background-color: pink; */
}
.each_post_container .comment_section .sec1 .user ion-icon
{
border-radius: 50px;
display: block;
background-color: var(--pink-color-button);
padding: 10px;
/* font-size: 12px; */
}
.each_post_container .comment_section .sec1 form
{
/* background-color: red; */
margin-left: 10px;
width: 100%;
display: flex;

97 | P a g e
flex-direction: column;
}
.each_post_container .comment_section .sec1 form input[type="text"] {
box-sizing: border-box;
}

.each_post_container .comment_section .sec1 form textarea

{
margin-top: 10px;
height: 100px;
}

.each_post_container .comment_section .sec1 form input,

.each_post_container .comment_section .sec1 form textarea {
padding: .8em;
/* font-size: 1em; */
border: 1px solid #aaa;
border-radius: 5px;
outline: none;
box-shadow: 3px 3px 5px rgba(0,0,0,.15);
width: 100%;
box-sizing: border-box;
}
/* .each_post_container .comment_section .sec1 form div
{
background-color: red;
} */
.each_post_container .comment_section .sec1 form p {
display: block;
width: auto;
margin-top: 10px;
font-size: .8em;
padding: .8em 1.4em;

98 | P a g e
text-transform: capitalize;
transition: opacity .2s ease-in-out;
background-color: var(--dark-blue);
color: #fff;
width: 100px;
text-decoration: none;
border-radius: 10px;
text-align: center;
border: none;
cursor: pointer;
}

.each_post_container .comment_section .sec1 form p:hover,

.each_post_container .comment_section .sec1 form p:focus,
.each_post_container .comment_section .sec1 form p:active {
background-color: var(--pink-color-button);
color: var(--dark-blue);
}

.each_post_container .comment_section .sec2

{
padding: 0;
margin-top: 20px;
}
.each_post_container .comment_section .sec2 .display_cc
{
/* padding: 10px; */
display: flex;
margin-top: 20px;

}
.each_post_container .comment_section .sec2 .display_cc .user
{

99 | P a g e
/* background-color: pink; */
cursor: default;

}
.each_post_container .comment_section .sec2 .display_cc .user ion-icon

{
border-radius: 50px;
display: block;
background-color: var(--pink-color-button);
padding: 7px;
font-size: 12px;
}
.each_post_container .comment_section .sec2 .display_cc .content
{
/* background-color: red; */
display: flex;
flex-direction: column;
margin-left: 15px;
position: relative;
/* background-color: red; */
width: 100%;
padding-bottom: 10px;
}
.each_post_container .comment_section .sec2 .display_cc .content p
{
margin: 0;
margin-bottom: 10px;
font-size: 14px;
font-weight: 600;
}
.each_post_container .comment_section .sec2 .display_cc .content span
{

100 | P a g e
display: block;
font-size: 14px;
opacity: .8;
cursor: default;
}
.each_post_container .comment_section .sec2 .display_cc .content hr
{
border: 1px solid var(--pink-color-button);
margin-top: 5px;
opacity: .3 ;
}
.each_post_container .comment_section .sec2 .display_cc .content small
{
display: block;
position: absolute;
right: 0;
bottom: 0;
font-size: 10px;
}

7.2.18. style.css
:root {
--theme-blue: 200, 80%, 38%;
--theme-red: 350, 63%, 52%;
--theme-pink: 350, 100%, 69%;
--theme-black: 0, 7%, 9%;
--theme-white: 0, 0%, 100%;
--theme-light: 40, 100%, 97%;
--theme-dark: 0, 7%, 29%;
color: hsl(var(--theme-dark));
background: hsl(var(--theme-light));
}

101 | P a g e
*::after,
*::before {
box-sizing: border-box;
}

a{
color: hsl(var(--theme-blue));
transition: color 150ms, text-decoration-color 150ms;
}
a:active, a:visited {
color: hsl(var(--theme-blue));
}
a:hover {
color: hsl(var(--theme-red));
}
a:focus, a:hover {
text-decoration-color: transparent;
}

a:focus,
[tabindex="-1"]:focus {
outline: 0.125rem solid hsl(var(--theme-pink));
}
a:focus:not(:focus-visible),
[tabindex="-1"]:focus:not(:focus-visible) {
outline: none;
}

.Carousel {
--carousel-gap: 1rem;
border-radius: 1rem;
display: flex;
gap: var(--carousel-gap);

102 | P a g e
overflow-y: hidden;
overflow-x: auto;
position: relative;
scroll-behavior: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
height: 20vw;
outline: none !important;
min-height: 20rem;
max-height: 30rem;
}
.Carousel::-webkit-scrollbar {
display: none;
}
.Carousel .Card {
aspect-ratio: var(--card-ratio);
flex: 1 0 auto;
min-height: 100%;
scroll-snap-align: start;
}
.Carousel .Card__media {
aspect-ratio: auto;
}
.Carousel > div:empty {
position: relative;
}
.Carousel > div:empty:first-child {
inset-inline-start: 10%;
margin-inline-end: calc(-1 * var(--carousel-gap));
}
.Carousel > div:empty:last-child {
inset-inline-end: 10%;

103 | P a g e
margin-inline-start: calc(-1 * var(--carousel-gap));
}

.Carousel--single .Card {
--card-ratio: auto;
flex: 1 0 100%;
}

@media (prefers-reduced-motion: reduce) {

.Carousel {
scroll-behavior: auto;
}
}
@supports not (aspect-ratio: 1/1) {
.Carousel .Card__media {
padding-block-end: 0 !important;
}
.Carousel .Card__image {
position: relative !important;
}
}
.Dots {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: end;
}

.Dot {
border-radius: 100%;
display: block;
height: 1.5rem;
width: 1.5rem;

104 | P a g e
position: relative;
}
.Dot::after {
background: currentColor;
border-radius: 100%;
content: "";
display: block;
height: 0.375rem;
width: 0.375rem;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}

.Dot--active {
color: hsl(var(--theme-pink)) !important;
}

.Pagination {
align-items: center;
display: flex;
justify-content: space-between;
margin: 0;
}
.Pagination .s1
{
display: flex;
}
.Pagination .Arrow:first-of-type {
/* margin-inline-end: auto;
order: -1; */
}

105 | P a g e
.Pagination .Arrow:last-of-type {
/* margin-inline-start: auto;
order: 1; */
}

.Arrow {
align-items: center;
appearance: none;
background: transparent;
border: none;
border-radius: 0.125rem;
cursor: pointer;
color: hsl(var(--theme-blue));
display: flex;
height: 3rem;
justify-content: center;
opacity: 1;
padding: 0.5rem;
transition: opacity 150ms, color 150ms;
width: 3rem;
}
.Arrow:hover {
color: hsl(var(--theme-red));
}
.Arrow:focus {
color: hsl(var(--theme-pink));
outline: none;
}
.Arrow:focus svg {
box-shadow: 0 0 0 0.125rem hsla(var(--theme-white), 1), 0 0 0 0.25rem currentColor;
}
.Arrow:focus:not(:focus-visible) {
color: hsl(var(--theme-red));

106 | P a g e
}
.Arrow:focus:not(:focus-visible) svg {
box-shadow: none;
}
.Arrow[disabled] {
color: hsl(var(--theme-dark));
opacity: 0.4;
pointer-events: none;
}
.Arrow svg {
border-radius: 100%;
fill: currentColor;
height: 100%;
width: 100%;
transition: box-shadow 150ms;
}
[dir=rtl] .Arrow svg {
transform: scaleX(-1);
}

.Hidden {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}

107 | P a g e
:root {
--card-link-color: var(--theme-blue);
--card-hover-color: var(--theme-red);
--card-focus-color: var(--theme-pink);
--card-inner-focus-color: var(--theme-white);
--card-shadow-color: var(--theme-black);
--card-foreground-color: var(--theme-dark);
--card-background-color: var(--theme-dark);
}

.Card {
--card-ratio: auto 1/1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: [media-start] auto [media-end main-start] auto [main-end];
max-width: 100%;
position: relative;
}

.Card__media {
aspect-ratio: var(--card-ratio);
background: hsla(var(--card-background-color), 0.5);
border-radius: 1rem;
grid-column: 1/-1;
grid-row: media-start/media-end;
max-width: 100%;
overflow: hidden;
position: relative;
z-index: -1;
}
.Card__media > * {
border-radius: inherit;
height: 100%;

108 | P a g e
object-fit: cover;
position: absolute;
width: 100%;
}

.Card__main {
align-self: end;
color: hsl(var(--card-foreground-color));
grid-column: 1/-1;
grid-row: main-start/main-end;
padding: 1.25rem;
}
.Card__main [href]:not(.Card__link) {
position: relative;
z-index: 2;
}
.Card__main > * {
margin: 0;
}

.Card__link {
color: hsl(var(--card-link-color));
font-weight: 600;
text-decoration-line: underline;
text-decoration-color: hsla(var(--card-link-color), 0.2);
text-decoration-thickness: 0.125rem;
text-decoration-skip: ink;
text-decoration-skip-ink: all;
text-decoration-offset: 100%;
}
.Card__link::after {
border: 0.125rem solid hsl(var(--card-focus-color));
box-shadow: inset 0 0 0 0.125rem hsla(var(--card-inner-focus-color), 1);

109 | P a g e
border-radius: 1rem;
bottom: 0;
content: "";
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: border-color 150ms, opacity 150ms;
z-index: 1;
}
.Card__link:hover, .Card__link:focus {
text-decoration-color: hsla(var(--card-hover-color), 1);
}
.Card__link:hover::after, .Card__link:focus::after {
opacity: 1;
}
.Card__link:focus {
outline: none;
text-decoration-color: currentColor;
}

.Card__heading {
line-height: 1.25;
margin-block-end: 0.5rem;
}

.Card--border .Card__link::after {
opacity: 1;
}
.Card--border .Card__link:not(:focus):not(:hover)::after {
border-color: hsla(var(--card-foreground-color), 0.5);

110 | P a g e
}

.Card--overlay {
--card-shadow-color: var(--theme-black);
--card-foreground-color: var(--theme-white);
--card-background-color: var(--theme-dark);
--card-link-color: var(--theme-white);
--card-hover-color: var(--theme-white);
grid-template-rows: [media-start] 1fr [overlay-start] 1rem [main-start] auto [main-end overlay-end media-
end];
}
.Card--overlay::before {
background: linear-gradient(to top, hsla(var(--card-shadow-color), 0.8) 20%, hsla(var(--card-shadow-
color), 0.3) 60%, transparent);
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
content: "";
display: block;
grid-column: 1/-1;
grid-row: overlay-start/overlay-end;
overflow: hidden;
}
.Card--overlay .Card__main p {
text-shadow: 0 0.0625rem 0.0625rem hsl(var(--card-shadow-color));
}
.Card--overlay .Card__main a {
color: hsl(var(--card-link-color));
}
.Card--overlay .Card__main a:active, .Card--overlay .Card__main a:visited {
color: hsl(var(--card-link-color));
}
.Card--overlay .Card__main a:hover, .Card--overlay .Card__main a:focus {
color: hsl(var(--card-hover-color));
}

111 | P a g e
.Card--square {
--card-ratio: auto 16/9;
}

.Card--photo {
--card-ratio: auto 16/9;
}

.Card--portrait {
--card-ratio: auto 3/4;
}

.Card--wide {
--card-ratio: auto 16/9;
}

body {
margin: 0;
}

img {
display: block;
height: auto;
/* max-width: 100%; */
}

.Main {
margin: 0 auto;
max-width: calc(90rem + 10vw);
padding: 1.5rem 5vw;
width: 100%;
}
112 | P a g e
.Main > *:first-child {
margin-block-start: 0;
}
.Main > h1, .Main > h2, .Main > h3 {
line-height: 1.25;
margin-block: 1.5rem 1rem;
}
.Main > ul {
margin-block: 1.5rem;
padding-inline: 2rem 0;
}
.Main > ul li {
margin-block: 0.5rem;
}
.Main > p {
margin-block: 1rem;
}
.Main a:not([class]) {
font-weight: 500;
}

7.2.19. subscribe.css
input.invalid,
textarea.invalid,
select.invalid,
.match_error,
.match_error:focus {
border-color: #ff7a7a;
}

.validation_error {
color: red;
font-size: 12px;

113 | P a g e
text-transform: capitalize;
position: absolute; left: 0;
}

.add_blog_container .post_form input.invalid,

.add_blog_container .post_form textarea.invalid,
.add_blog_container .post_form select.invalid,
.add_blog_container .post_form .match_error,
.add_blog_container .post_form .match_error:focus {
border-color: #ff7a7a;
}

.add_blog_container
{
position: relative;

.add_blog_container .title
{
margin-bottom: 40px;
}
.add_blog_container .title span
{
display: block;
font-size: 2em;
font-weight: 900;
font-family: var(--pop-text);
color: var(--dark-blue);
}

.add_blog_container .post_form
{
114 | P a g e
/* background-color: rgb(231, 201, 201); */
}
.add_blog_container .post_form .pad
{
/* background-color: green; */
margin: 15px 0;
}
.add_blog_container .post_form .pad label
{
font-size: 16px;
}
.add_blog_container .post_form .pad .s1
{
/* display: flex; */
/* justify-content: space-around; */
display: grid;
grid-template-columns: auto auto;
gap: 30px;

}
@media (max-width: 600px) {
.add_blog_container .post_form .pad .s1
{
gap: 5px;
display: flex;
flex-direction: column;
}
.add_blog_container .post_form input[type="submit"] {
width: 100%;
}
}
.add_blog_container .post_form select
{

115 | P a g e
width: 100%;
}
.add_blog_container .post_form .pad .s1 input[type="text"]
{
width: 100%;
box-sizing: border-box;
border: none;
box-shadow: none;
border-radius: 10px;
background-color: #fff;
color: black;
border: 1px solid var(--dark-blue);
}

.add_blog_container .post_form .email input[type="text"]

{
width: 100%;
box-sizing: border-box;
border: none;
box-shadow: none;
border-radius: 10px;
background-color: #fff;
color: black;
border: 1px solid var(--dark-blue);
transition: 0.3s;

}
.add_blog_container .post_form .email textarea
{
width: 100%;
box-sizing: border-box;
border: none;
box-shadow: none;

116 | P a g e
border-radius: 10px;
background-color: #fff;
color: black;
border: 1px solid var(--dark-blue);
text-align: left;
transition: 0.3s;

}
.add_blog_container .post_form input[type="text"]:focus,
.add_blog_container .post_form textarea:focus
{
border-color: #00a183;
}

input,
select,
textarea {
margin: .7em 0;
padding: .8em;
font-size: 1em;
border: 1px solid #aaa;
border-radius: 3px;
outline: none;
box-shadow: 3px 3px 5px rgba(0,0,0,.15);
}

input[type="submit"] {
width: auto;
margin-bottom: 3em;
font-size: .8em;
padding: .8em 1.4em;
text-transform: uppercase;
transition: opacity .2s ease-in-out;

117 | P a g e
background-color: #666;
color: #fff;
border: none;
}

input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active {
background-color: #00a183;
color: #fff;
}

.add_blog_container .post_form .image

{
}

.add_blog_container .post_form .image

{
width:250px;
background:#fff;
cursor: pointer;
position: relative;
}
.add_blog_container .post_form .image .preview
{
position: absolute;
right: 0;
top: 0;
transform: translateX(280px);
overflow: hidden;
border-radius: 10px;
height: 150px;
width: 250px;

118 | P a g e
display: flex;
justify-content: center;
align-items: center;
}
.add_blog_container .post_form .image img {
width: 100%;
height: auto;
object-fit: contain;
}

.add_blog_container .post_form .image input {

/* display:none; */
position: absolute;
top:0;
opacity: 0;
}
.add_blog_container .post_form .image label {
display:block;
height:45px;
margin-left: 25%;
line-height:50px;
text-align:center;
background: var(--pink-color-button);
color:var(--text-color-light);
font-size:15px;
text-transform:capitalize;
border-radius:5px;
cursor:pointer;
margin: auto;
}

.add_blog_container .post_form input[type="submit"] {

display:block;

119 | P a g e
height:45px;
text-align:center;
background: var(--dark-blue);
color:var(--text-color-light);
font-size:15px;
text-transform:capitalize;
border-radius:5px;
cursor:pointer;
}

.add_blog_container .post_form .pad .s1 .dd,

.add_blog_container .post_form .pad .dd
{
position: relative;
}
.val_error
{
position: absolute;
bottom: 0px;
left: 0;
transform: translateY(5px);
color: red;
font-size: 10px;
}

7.2.20. validin.css
input.invalid,
textarea.invalid,
select.invalid,
.match_error,
.match_error:focus {
border-color: #ff7a7a;

120 | P a g e
}

.validation_error {
color: red;
font-size: 12px;
text-transform: capitalize;
position: absolute; left: 0;
}

.add_blog_container .post_form input.invalid,

.add_blog_container
{
position: relative;

.add_blog_container .title
{
margin-bottom: 40px;
}
.add_blog_container .title span
{
display: block;
font-size: 2em;
font-weight: 900;
font-family: var(--pop-text);
121 | P a g e
color: var(--dark-blue);
}

.add_blog_container .post_form
{
/* background-color: rgb(231, 201, 201); */
}
.add_blog_container .post_form .pad
{
/* background-color: green; */
margin: 15px 0;
}
.add_blog_container .post_form .pad label
{
font-size: 16px;
}
.add_blog_container .post_form .pad .s1
{
/* display: flex; */
/* justify-content: space-around; */
display: grid;
grid-template-columns: auto auto;
gap: 30px;

}
@media (max-width: 600px) {
.add_blog_container .post_form .pad .s1
{
gap: 5px;
display: flex;
flex-direction: column;

122 | P a g e
}
.add_blog_container .post_form select
{
width: 100%;
}
.add_blog_container .post_form .pad .s1 input[type="text"]
{
width: 100%;
box-sizing: border-box;
border: none;
box-shadow: none;
border-radius: 10px;
background-color: #fff;
color: black;
border: 1px solid var(--dark-blue);
}

.add_blog_container .post_form .email input[type="text"]

{
width: 100%;
box-sizing: border-box;
border: none;
box-shadow: none;
border-radius: 10px;
background-color: #fff;
color: black;
border: 1px solid var(--dark-blue);
transition: 0.3s;

}
.add_blog_container .post_form .email textarea
{
width: 100%;

123 | P a g e
box-sizing: border-box;
border: none;
box-shadow: none;
border-radius: 10px;
background-color: #fff;
color: black;
border: 1px solid var(--dark-blue);
text-align: left;
transition: 0.3s;

}
.add_blog_container .post_form input[type="text"]:focus,
.add_blog_container .post_form textarea:focus
{
border-color: #00a183;
}

input,
select,
textarea {
margin: .7em 0;
padding: .8em;
font-size: 1em;
border: 1px solid #aaa;
border-radius: 3px;
outline: none;
box-shadow: 3px 3px 5px rgba(0,0,0,.15);
}

input[type="submit"] {
width: auto;
margin-bottom: 3em;
font-size: .8em;

124 | P a g e
padding: .8em 1.4em;
text-transform: uppercase;
transition: opacity .2s ease-in-out;
background-color: #666;
color: #fff;
border: none;
}

input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active {
background-color: #00a183;
color: #fff;
}

.add_blog_container .post_form .image

{
}

.add_blog_container .post_form .image

125 | P a g e
border-radius: 10px;
height: 150px;
width: 250px;
display: flex;
justify-content: center;
align-items: center;
}
.add_blog_container .post_form .image img {
width: 100%;
height: auto;
object-fit: contain;
}

.add_blog_container .post_form .image input {

126 | P a g e
.add_blog_container .post_form input[type="submit"] {
display:block;
height:45px;
text-align:center;
background: var(--dark-blue);
color:var(--text-color-light);
font-size:15px;
text-transform:capitalize;
border-radius:5px;
cursor:pointer;
}

.add_blog_container .post_form .pad .s1 .dd,

.add_blog_container .post_form .pad .dd
{
position: relative;
}
.val_error
{
position: absolute;
bottom: 0px;
left: 0;
transform: translateY(5px);
color: red;
font-size: 10px;
}

7.2.21. showBlogmedia.css
@media (max-width: 1000px) {
.each_post_container
{
width: 90%;

127 | P a g e
}
.each_post_container .sec2 .s2 .grid-container { gap: 10px; }
.each_post_container .sec2 .s2 .grid-container .grid .contss{padding: 10px;}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details .db_title a {font-size: 14px;}
}

@media (max-width: 800px) {

.each_post_container
{
padding-top: 0;
width: 100%;
}
.each_post_container .sec2 .s2 .grid-container { grid-template-columns: auto auto;}
.each_post_container .sec2 .s2 .grid-container .grid .contss .s1 .db_category {padding: 2px 7px;}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details .db_det1 p { font-size: 12px; }
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details .to_off {display: none;}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details span {font-size: 10px;}

.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details .db_title {line-height: 15px;
display: unset;
/* background-color: red; */
}

@media (max-width: 530px) {

.each_post_container
{
width: 100%;
padding: 0;
}
.each_post_container .sec1 { padding: 0; }
.contents_o1

128 | P a g e
{
width: 100%;
margin: 0px;
}
.each_post_container .sec1 .title p{
font-size: 1.2em;
line-height: 20px;
}
.each_post_container .sec1 .prate{
display: flex;
flex-direction: column;
line-height: 20px;
margin-top: 5px;
}
.each_post_container .sec1 .prate span{
font-size: 12px;
line-height: 15px;
}
.each_post_container .sec1 .prate .category
{
padding: 2px 10px;
font-size: 12px;
width: fit-content;
margin-top: 10px;
}
.each_post_container .sec1 .postless { margin-top: 20px; }
.each_post_container .sec1 .postless p
{
font-size: 13px;
word-spacing: 0px;
line-height: 20px;
opacity: .8;
}

129 | P a g e
.each_post_container .sec1 .postless span
{
font-size: 12px;
}
.each_post_container .sec2 {padding: 0;}
.each_post_container .sec2 .title { margin-bottom: 10px; }
.each_post_container .sec2 .title span { font-size: 12px; }
.each_post_container .sec2 .s2 .grid-container { grid-template-columns: auto;}
.each_post_container .sec2 .s2 .grid-container .grid {gap: 5px;}
.each_post_container .sec2 .s2 .grid-container .grid .contss { display: block; padding: 9px;}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details {margin: 0;}
.each_post_container .sec2 .s2 .grid-container .grid .contss .s1 .db_category {display: none;}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details .to_date {margin: 0;}
.each_post_container .sec2 .s2 .grid-container .grid .contss .db_details .db_det1 {margin-top: 5;}
.back_to_home
{
margin-left: 0px;
margin-bottom: 20px;
}
.each_post_container .comment_section { padding: 0;}
.each_post_container .comment_section .sec1 { transform: translateX(-10px);width: 100%; }
.each_post_container .comment_section .sec1 form {margin: 0; }
.each_post_container .comment_section .sec1 form input[type="submit"] { width: 100%; }
.each_post_container .comment_section .sec1 form textarea {height: 70px;}
.each_post_container .comment_section .sec1 .user {display: none;}
.each_post_container .comment_section .sec2 {
margin-bottom: 30px;
}
.each_post_container .comment_section .sec2 .display_cc .content span,
.each_post_container .comment_section .sec2 .display_cc .content p {font-size: 12px;}

130 | P a g e
JavaScript: -

7.2.22. index.js
const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
slideFrom:'left',
enableEscapeKey:true,
closeBtn:'close',
closeBtnSize:'14px',
width: '300px',

});

$('body').on('click', '.open_nav1', () => {

slideOutPanel.open();
});

7.2.23. side-out-panel.js
(function($, window) {
const pluginName = 'SlideOutPanel';

// Create the defaults once //

const defaults = {
// Options //
bodyPush: false,
breakpoint: '768px',
closeBtn: '✕',
closeBtnSize: '',
enableEscapeKey: false,
offsetTop: 0,
screenClose: true,
screenOpacity: '0.5',
screenZindex: '9998',
showScreen: true,
slideFrom: 'right',
131 | P a g e
transition: 'ease',
transitionDuration: '0.35s',
width: '350px',
// Events //
afterClosed() { },
afterOpen() { },
beforeClosed() { },
beforeOpen() { },
rendered() { },
};

let globalSettings;
let pluginLoaded = false;

// ---------------------------------------------------- PLUGIN DEFINITION //

$.fn[pluginName] = function(options) {
let componentElm;
let headerElm;
let contentElm;
let footerElm;
let screenSize;

// Check to see if element exists //

if (typeof $(this).attr('id') === 'undefined') {
console.error(`${pluginName}: Element not found. Element options:`, options);
return false;
}

// ---------------------------------------------------- SlideOutPanel constructor //

function SlideOutPanel(element, soOptions) {
// Collect component elements //
componentElm = $(`#${element.id}`);
headerElm = $(`#${element.id} header`);

132 | P a g e
contentElm = $(`#${element.id} section`);
footerElm = $(`#${element.id} footer`);

// Add class if missing to try to prevent showing content before built //

if (!componentElm.hasClass('slide-out-panel')) {
componentElm.addClass('slide-out-panel');
}
// Check to make sure the content section exists //
if (typeof $(contentElm).html() === 'undefined') {
destroyPanel(element.id, `#${element.id} <section> missing.`);
return false;
}

// Set settings //
globalSettings = globalSettings || {};
globalSettings[element.id] = element;

// Merge defaults and options //

globalSettings[element.id] = $.extend({}, defaults, soOptions);

// Set transitionDuration to INT //

let transitionDuration = globalSettings[element.id].transitionDuration;
transitionDuration = transitionDuration.replace('s', '');
globalSettings[element.id].transitionDuration = parseFloat(transitionDuration);

// Window size //
orientationChange();

this._defaults = defaults;
this._name = pluginName;

// Start building the panel //

init(element.id, globalSettings[element.id]);

133 | P a g e
return false;
}

// ---------------------------------------------------- INIT //
const init = (elmId, settings) => {
component(elmId, settings);

if (typeof $(headerElm).html() !== 'undefined') {

header(elmId, settings);
}

content(elmId, settings);
footer();

// Check if background screen should be shown //

if (settings.showScreen) {
screen(elmId, settings);
}

// Call rendered method when finished with setup //

settings.rendered();
return false;
};

// ---------------------------------------------------- COMPONENT //
const component = (elmId, settings) => {
const openHorizontal = settings.slideFrom === 'left' || settings.slideFrom === 'right';

componentElm
.addClass(`slide-out-panel-container ${settings.slideFrom}`)
.css({
display: 'block',
height: settings.offsetTop === 0 ? 'initial' : `calc(100vh - ${settings.offsetTop})`,

134 | P a g e
top: settings.slideFrom === 'bottom' ? 'initial' : settings.offsetTop,
transitionTimingFunction: `${settings.transition}`,
transitionDuration: `${settings.transitionDuration}s`,
width: settings.width,
})
.attr('data-id', elmId);

if (settings.bodyPush && openHorizontal) {

$('html').css({
transition: `width ${settings.transitionDuration}s ${settings.transition}`,
});
}

// Start with the panel hidden //

// If sliding out from left or right //
if (openHorizontal) {
const measure = settings.width.match(/[a-zA-Z]+/);
let num = settings.width.match(/(\d+)/);
num = parseInt(num) + 10;

componentElm.addClass(`slide-out-panel-container ${settings.slideFrom}`).css({
left: settings.slideFrom !== 'left' ? 'initial' : `-${num}${measure}`,
right: settings.slideFrom !== 'right' ? 'initial' : `-${num}${measure}`,
});
}
else {
// If sliding out from top or bottom //
componentElm.addClass(`slide-out-panel-container ${settings.slideFrom}`).css({
bottom: settings.slideFrom !== 'bottom' ? 'initial' : '-100%',
top: settings.slideFrom !== 'top' ? 'initial' : '-100%',
width: '100vw',
});
}

135 | P a g e
};

// ---------------------------------------------------- PANEL PIECES //

// -------------------------- Header //
const header = (elmId, settings) => {
if (typeof headerElm.html() !== 'undefined') {
headerElm.addClass('slide-out-header').append(closeBtn(elmId, settings));
}
};

// -------------------------- Content //
const content = (elmId, settings) => {
contentElm.addClass('slide-out-content');

if (typeof headerElm.html() === 'undefined') {

contentElm.append(closeBtn(elmId, settings));
}
};

// -------------------------- Footer //
const footer = () => {
footerElm.addClass('slide-out-footer');
};

// -------------------------- Close button //

136 | P a g e
return btnHtml;
};

// ---------------------------------------------------- SCREEN //
const screen = (elmId, settings) => {
let screenHtml = '';
screenHtml += '<div ';
screenHtml += `id="slide-out-panel-screen-${elmId}"`;
screenHtml += 'class="slide-out-panel-screen" ';
screenHtml += `data-id="${elmId}" `;
screenHtml += 'style="';
screenHtml += `background-color: rgba(0, 0, 0, ${settings.screenOpacity});`;
screenHtml += `transition-timing-function: ${settings.transition};`;
screenHtml += `transition-duration: ${settings.transitionDuration}s;`;
screenHtml += `z-index: -${settings.screenZindex};`;
screenHtml += '">';
screenHtml += '</div>';

$('body').append(screenHtml);

// Touch detection for mobile devices //

if (settings.screenClose) {
const touchScreen = document.getElementById(`slide-out-panel-screen-${elmId}`);

touchScreen.addEventListener('touchend', e => {
e.preventDefault();
const closeBtnElemId = $(this).attr('data-id');
closePanel(closeBtnElemId, globalSettings[closeBtnElemId], this);
return false;
}, false);
}
};

137 | P a g e
// ---------------------------------------------------- PANEL POSITIONS //
const panelPositions = (elmId, settings, action) => {
const openHorizontal = settings.slideFrom === 'left' || settings.slideFrom === 'right';
let positionVal;
let css;

// Set position value //

if (action === 'open') {
positionVal = '0';
}
else {
const measure = settings.width.match(/[a-zA-Z]+/);
let num = settings.width.match(/(\d+)/);
num = parseInt(num) + 10;
positionVal = openHorizontal ? `-${num}${measure}` : '-100%';
}

// Slide out from left or right //

if (openHorizontal) {
css = {
left: settings.slideFrom === 'right' ? 'initial' : positionVal,
right: settings.slideFrom === 'left' ? 'initial' : positionVal,
};
}
else {
// Slide out from top or bottom //
css = {
top: settings.slideFrom === 'bottom' ? 'initial' : positionVal,
bottom: settings.slideFrom === 'top' ? 'initial' : positionVal,
};
}

if (action === 'open') {

138 | P a g e
$(`#${elmId}`).addClass('open');
}
else {
$(`#${elmId}`).removeClass('open');
}

$(`#${elmId}`).css(css);
return false;
};

// ---------------------------------------------------- CLOSE PANEL //

// ESC Key Recursion as there is no elmId associated with it //

if (!elmId && !settings && !elm) {
// Close all panels //
Object.entries(globalSettings).forEach(([key, val]) => {
if (globalSettings[key].enableEscapeKey) {
closePanel(key, globalSettings[key]);
}
});

return false;
}

139 | P a g e
// Call beforeClosed method before panel is closed //
settings.beforeClosed();

// Close Panel and adjust left/right styles //

panelPositions(elmId, settings, 'close');

// Hide Screen //
$(`#slide-out-panel-screen-${elmId}`).removeClass('open').css({
opacity: 0,
transitionDuration: `${settings.transitionDuration}s`,
});

if (settings.bodyPush && (settings.slideFrom === 'left' || settings.slideFrom === 'right')) {

$('html').css({
width: '100%',
});
}

setTimeout(() => {
// Move screen z-index back //
$(`#slide-out-panel-screen-${elmId}`).css({
zIndex: '-9999',
});

if (settings.bodyPush && (settings.slideFrom === 'left' || settings.slideFrom === 'right')) {

$('html').removeClass(`slide-out-${settings.slideFrom}`).css('position', 'initial');
}

// Call afterClosed method after panel is closed //

settings.afterClosed();
}, settings.transitionDuration * 1000);

140 | P a g e
return false;
};

// ---------------------------------------------------- DESTROY PANEL //

const destroyPanel = (elmId, msg = false) => {
$(`#${elmId}, .slide-out-panel-screen[data-id="${elmId}"]`).remove();

// Check for message to log error //

if (msg) {
console.error(`${pluginName}: ${msg}`);
}

return false;
};

// ---------------------------------------------------- OPEN PANEL //

const openPanel = (elmId = false, settings) => {
// Check if panel exists //
if (typeof settings === 'undefined') {
destroyPanel(elmId, `#${elmId} doesn't exist.`);
return false;
}

if (settings.bodyPush && (settings.slideFrom === 'left' || settings.slideFrom === 'right')) {

$('html').addClass(`slide-out-${settings.slideFrom}`);
}

// Call beforeOpen method before panel is open //

settings.beforeOpen();

// Open Panel and adjust left/right styles //

panelPositions(elmId, settings, 'open');

141 | P a g e
// Show Screen //
$(`#slide-out-panel-screen-${elmId}`).addClass('open').css({
opacity: 1,
transitionDuration: `${settings.transitionDuration}s`,
zIndex: `${settings.screenZindex}`,
});

if (settings.bodyPush && (settings.slideFrom === 'left' || settings.slideFrom === 'right')) {

$('html').css({
position: 'absolute',
width: `calc(${$('body').width()}px - ${settings.width}`,
});
}

// Call afterOpen method after panel is opened //

setTimeout(() => {
settings.afterOpen();
}, settings.transitionDuration * 1000);

return false;
};

// ---------------------------------------------------- TOGGLE PANEL //

const togglePanel = (elmId = false) => {
if ($(`#${elmId}`).hasClass('open')) {
closePanel(elmId, globalSettings[elmId]);
}
else {
openPanel(elmId, globalSettings[elmId]);
}

return false;
};

142 | P a g e
// ---------------------------------------------------- WINDOW SIZE & ORIENTATION CHANGING //
const orientationChange = () => {
const screenWidth = $(window).width();

for (let i = 0; i < Object.values(globalSettings).length; i += 1) {

const settings = Object.values(globalSettings)[i];
const breakpoint = settings.breakpoint.match(/(\d+)/);

if (screenWidth < breakpoint[0] && settings.bodyPush) {

$('html').addClass('slide-out-panel-static');
break;
}
else {
$('html').removeClass('slide-out-panel-static');

if (settings.bodyPush && $(`.slide-out-panel-

container.${settings.slideFrom}`).hasClass('open')) {
$('html').css({
width: `calc(${screenWidth}px - ${settings.width}`,
});
}
}
}
};

// Resize //
let resizeTimer;

$(window).on('resize', e => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
orientationChange();
}, 250);
143 | P a g e
});

// ---------------------------------------------------- Public Functions //

// -------------------------- Close Panel //
this.close = function() {
const closeElemId = $(this).attr('id');
closePanel(closeElemId, globalSettings[closeElemId]);
};

// Click to close //
if (!pluginLoaded) {
$('body').on('click', '.close-slide-out-panel, .slide-out-panel-screen', function() {
const closeBtnElemId = $(this).attr('data-id');
closePanel(closeBtnElemId, globalSettings[closeBtnElemId], this);
return false;
});

pluginLoaded = true;
}

// -------------------------- Escape Key to Close

$('body').on('keyup', e => {
if (e.keyCode === 27) {
closePanel();
}
});

// -------------------------- Destroy Panel //

this.destroy = () => {
const destroyElemId = $(this).attr('id');
destroyPanel(destroyElemId);
};

144 | P a g e
// -------------------------- Open Panel //
this.open = function() {
const openElemId = $(this).attr('id');
if (!$(`#${openElemId}`).hasClass('open')) {
openPanel(openElemId, globalSettings[openElemId]);
}
};

// -------------------------- Toggle Panel //

this.toggle = function() {
const openElemId = $(this).attr('id');
togglePanel(openElemId, globalSettings[openElemId]);
};

// ---------------------------------------------------- Set Plugin //

return this.each(function() {
$.data(this, `plugin-${pluginName}-${$(this).attr('id')}`, new SlideOutPanel(this, options));
});
};
}(jQuery, window));

7.2.24. script.js
(() => {
// Respect user perference
const isReducedMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;

// Helper to apply inline CSS

const setStyleProps = ($el, styles) => {
for (const [key, value] of Object.entries(styles)) {
if (value === false) {
$el.style.removeProperty(key);

145 | P a g e
} else {
$el.style.setProperty(key, value);
}
}
};

document.querySelectorAll('.Carousel').forEach(($carousel) => {
$carousel.scrollLeft = 0;

const $cards = Array.from($carousel.querySelectorAll('.Card'));

const $pagination = $carousel.nextElementSibling;
const [$previous, $next] = $pagination.querySelectorAll('.Arrow');
$pagination.querySelector('.Dot').classList.add('Dot--active');

const $start = document.createElement('div');

const $end = document.createElement('div');
$carousel.prepend($start);
$carousel.append($end);

const observer = new IntersectionObserver((entries) => {

entries.forEach((entry) => {
if (entry.target === $start) {
if ($previous) {
$previous.disabled = entry.isIntersecting;
}
}
if (entry.target === $end) {
if ($next) {
$next.disabled = entry.isIntersecting;
}
}
});
});

146 | P a g e
observer.observe($start);
observer.observe($end);

const scrollTo = ($card) => {

let offset = getOffset($card);
const left = document.dir === 'rtl' ? -offset : offset;
const behavior = isReducedMotion ? 'auto' : 'smooth';
$carousel.scrollTo({left, behavior});
};

const getOffset = ($el) => {

147 | P a g e
$cards.forEach(($item) => {
const offset = getOffset($item);
if (offset - scroll > 1 && offset < getOffset($card)) {
$card = $item;
}
});
scrollTo($card);
});

$pagination.addEventListener('click', (ev) => {

if (ev.target.classList.contains('Dot')) {
ev.preventDefault();
const $card = document.querySelector(new URL(ev.target.href).hash);
if ($card) scrollTo($card);
}
});
// Highlight nearest "Dot" in pagination
let scrollTimeout;
$carousel.addEventListener(
'scroll',
() => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
let $dot = $pagination.querySelector('.Dot--active');
if ($dot) $dot.classList.remove('Dot--active');
let $active;
const scroll = Math.abs($carousel.scrollLeft);
if (scroll <= 0) {
$active = $cards[0];
}
if (scroll >= $carousel.scrollWidth - $carousel.offsetWidth) {
$active = $cards[$cards.length - 1];
}

148 | P a g e
if (!$active) {
let oldDiff;
$cards.forEach(($card) => {
const newDiff = Math.abs(scroll - getOffset($card));
if (!$active || newDiff < oldDiff) {
$active = $card;
oldDiff = newDiff;
} });
}
$dot = $pagination.querySelector(
`[href="#${($active ?? $card[0]).id}"]`
);
if ($dot) $dot.classList.add('Dot--active');
}, 50);
},
{passive: true}
);
// Improve arrow key navigation
$carousel.addEventListener('keydown', (ev) => {
if (/^(Arrow)?Left$/.test(ev.key)) {
ev.preventDefault();
(document.dir === 'rtl' ? $next : $previous).click();
} else if (/(Arrow)?Right$/.test(ev.key)) {
ev.preventDefault();
(document.dir === 'rtl' ? $previous : $next).click();
}
});
// Improve transition when tabbing focus
let scrollLeft = 0;
$carousel.addEventListener(
'blur',
(ev) => {
scrollLeft = $carousel.scrollLeft;

149 | P a g e
},
{capture: true});
$carousel.addEventListener(
'focus',
(ev) => {
$carousel.scrollLeft = scrollLeft;
const $card = ev.target.closest('.Card');
if ($card) scrollTo($card);
},
{capture: true}
);
});
// Optional polyfill for Safari 14
if (!isReducedMotion && !window.CSS.supports('scroll-behavior: smooth')) {
import('https://cdn.skypack.dev/smoothscroll-polyfill').then((module) => {
module.polyfill();
});
}
})();

Email: -
The ruki Blog implementing email functionality using PHPMailer involves integrating the
PHPMailer library to enable seamless email communication within the application. The primary objective is
to facilitate the sending of emails for user authentication, notifications, and communication purposes. The
system must support the configuration of SMTP settings, allowing for compatibility with various email
servers. Key functionalities include composing and sending emails, handling attachments, and incorporating
HTML content. Additionally, the SRS outlines security measures such as email validation and prevention of
common email-related vulnerabilities. The implementation should be modular and easily extensible,
accommodating future enhancements or changes in email requirements. Testing protocols should verify the
reliability and efficiency of the email functionality, ensuring successful delivery and a positive user
experience.

150 | P a g e
8. Working
This is the ruki Blog Web Application with the interactive UI for the easy access for user This application
can be used to post our blog. The key features in this are as follows,

• In this Categorize blog post.

• User can create and Upload Blog.

• Reader can comment on a Blog.

• It uses media query to Responsive web Design.

• Integration with PHPMailer for the sending of emails, including user communication.

These features are implemented with the help of: -

1. HTML, CSS, and JavaScript.

2. Navigation.

3. PHPMailer.

4. MySQL Database.

5. Bootstrap and External Library’s.

151 | P a g e
9. Conclusion
In conclusion, the development of the Blog Website is poised to create a robust and user-centric platform
that empowers both content creators and readers. The comprehensive System Requirements Specification
(SRS) has meticulously outlined key features ranging from user registration and content creation to
advanced functionalities such as notifications, analytics, and email communication using PHPMailer. With a
focus on responsive design, security, and accessibility, the Blog Website is designed to provide a seamless
and engaging experience across various devices while ensuring data integrity and user privacy. The
integration of user feedback mechanisms and continuous improvement initiatives underscores a commitment
to creating a dynamic online community that evolves in tandem with user preferences. The envisioned Blog
Website, guided by the SRS, stands as a testament to the convergence of functionality, usability, and
innovation, poised to deliver a compelling and enriching blogging experience for all users.

152 | P a g e
10. Deployment
The deployment of the Blog Website involves the process of making the developed system available for
public access. GitHub, a widely used version control platform, will be utilized to streamline the
deployment workflow.

Repo: https://github.com/theajitpoonia/Ruki-Blog

11. Bibliography
• Sommerville, I. (2011). Software Engineering (9th ed.). Addison-Wesley.
• Pressman, R. S. (2014). Software Engineering: A Practitioner's Approach (8th ed.). McGraw-Hill
Education.
• PHPMailer Documentation. (n.d.). Retrieved from https://github.com/PHPMailer/PHPMailer.
• World Wide Web Consortium (W3C). (2008). Web Content Accessibility Guidelines (WCAG) 2.0.
Retrieved from https://www.w3.org/TR/WCAG20/
• XAMPP Official Documentation
• Bootstrap Framework for HTML, CSS, JavaScript.

153 | P a g e

Blog Website Documentation
0% (1)
Blog Website Documentation
20 pages
Evaluation of New Ventures Ouai Haircare
No ratings yet
Evaluation of New Ventures Ouai Haircare
27 pages
SRS (Software Requirements Specification) For A Blogging Site
No ratings yet
SRS (Software Requirements Specification) For A Blogging Site
4 pages
Srs Blogging System
No ratings yet
Srs Blogging System
8 pages
Findmy Project Report
No ratings yet
Findmy Project Report
16 pages
GROUP-Minor Project Report 2023-24 (NISHANT) New
No ratings yet
GROUP-Minor Project Report 2023-24 (NISHANT) New
15 pages
E-Blogging System Final srs1
No ratings yet
E-Blogging System Final srs1
17 pages
Full Stack
No ratings yet
Full Stack
97 pages
Blog Project Report
No ratings yet
Blog Project Report
8 pages
Blogging Report
No ratings yet
Blogging Report
17 pages
Blog Website
No ratings yet
Blog Website
11 pages
Blogging Report
No ratings yet
Blogging Report
17 pages
Blog Website Project Documentation - BCA Student
No ratings yet
Blog Website Project Documentation - BCA Student
42 pages
Major 2 ND
No ratings yet
Major 2 ND
12 pages
Synopsis
No ratings yet
Synopsis
11 pages
Print Final Synopsis
No ratings yet
Print Final Synopsis
11 pages
Blog
No ratings yet
Blog
30 pages
SRS Documentation Group - 8
No ratings yet
SRS Documentation Group - 8
6 pages
Blogging Website Project Report (2) Jheqfvbsczicdb
No ratings yet
Blogging Website Project Report (2) Jheqfvbsczicdb
14 pages
Blog
No ratings yet
Blog
41 pages
Blogging Website Project Reportwifsaiuhfahufhbf
No ratings yet
Blogging Website Project Reportwifsaiuhfahufhbf
9 pages
BLOGGING
No ratings yet
BLOGGING
80 pages
News Blog1
No ratings yet
News Blog1
38 pages
Report
No ratings yet
Report
17 pages
Python Trainings Report
No ratings yet
Python Trainings Report
17 pages
Project Proposal
No ratings yet
Project Proposal
6 pages
Bloggin App
No ratings yet
Bloggin App
34 pages
Blogging Platform Web Technologies PBL Project
No ratings yet
Blogging Platform Web Technologies PBL Project
39 pages
Srs - 2
No ratings yet
Srs - 2
10 pages
Project Document
No ratings yet
Project Document
71 pages
Blog App Project
No ratings yet
Blog App Project
48 pages
MINI
No ratings yet
MINI
14 pages
Blog App Project
No ratings yet
Blog App Project
48 pages
Blog App Project
No ratings yet
Blog App Project
48 pages
Sahil Report
No ratings yet
Sahil Report
68 pages
Synopses Ashish
No ratings yet
Synopses Ashish
10 pages
SRS - Storifal
No ratings yet
SRS - Storifal
6 pages
Project Report: Blogging Website Using MERN Stack
No ratings yet
Project Report: Blogging Website Using MERN Stack
14 pages
Technical Blog Report
No ratings yet
Technical Blog Report
46 pages
Online Blogging System: A Project Report
100% (1)
Online Blogging System: A Project Report
50 pages
Online Blog Site - Docs
No ratings yet
Online Blog Site - Docs
22 pages
Mahesh BC A Final Defence
No ratings yet
Mahesh BC A Final Defence
37 pages
Blog App Project
No ratings yet
Blog App Project
48 pages
Sudhanshu Report1
No ratings yet
Sudhanshu Report1
67 pages
Synopsis On Blogging System
100% (2)
Synopsis On Blogging System
12 pages
Blogging System-Midterm Report
No ratings yet
Blogging System-Midterm Report
27 pages
CC Report2
No ratings yet
CC Report2
19 pages
Blog App Project
No ratings yet
Blog App Project
48 pages
Blog App Project
No ratings yet
Blog App Project
49 pages
Sample Project
No ratings yet
Sample Project
93 pages
Blog System Project
No ratings yet
Blog System Project
26 pages
56-60 Case Study
No ratings yet
56-60 Case Study
9 pages
Web Investigatory Project
No ratings yet
Web Investigatory Project
16 pages
SRS of Computer Science
No ratings yet
SRS of Computer Science
11 pages
Core PHP Task Blog Managment
No ratings yet
Core PHP Task Blog Managment
2 pages
Proposal 102
No ratings yet
Proposal 102
10 pages
Eblog System
No ratings yet
Eblog System
5 pages
AI Blog Generator SRS
No ratings yet
AI Blog Generator SRS
4 pages
BlogSpot Thesis Paper1
No ratings yet
BlogSpot Thesis Paper1
38 pages
Group 5 (Online Blogging System)
No ratings yet
Group 5 (Online Blogging System)
85 pages
Linux Practical Questions
No ratings yet
Linux Practical Questions
2 pages
GSLC Inspire Agra Floor Plan'24 to 26 July'25 Jaypee (1) (1)
No ratings yet
GSLC Inspire Agra Floor Plan'24 to 26 July'25 Jaypee (1) (1)
1 page
DevTrivedi InternshalaResume
No ratings yet
DevTrivedi InternshalaResume
2 pages
Dev Trivedi
No ratings yet
Dev Trivedi
2 pages
3 JavascriptNotes
No ratings yet
3 JavascriptNotes
245 pages
Tentative List For Indore Event - Sheet1
No ratings yet
Tentative List For Indore Event - Sheet1
5 pages
Marking Rubric Writing Assignment
No ratings yet
Marking Rubric Writing Assignment
1 page
Economics Assignment
No ratings yet
Economics Assignment
1 page
Delegate Invite Mail
No ratings yet
Delegate Invite Mail
3 pages
Guidelines For Assignments & Audit Course MBA Sem III
No ratings yet
Guidelines For Assignments & Audit Course MBA Sem III
3 pages
Tentative List For Indore Event - Sheet1
No ratings yet
Tentative List For Indore Event - Sheet1
4 pages
TDS 2075-2076
No ratings yet
TDS 2075-2076
3 pages
Adriana Galvez-Aguilar - Poetry Project Pres
No ratings yet
Adriana Galvez-Aguilar - Poetry Project Pres
11 pages
Vasudha HEALTH INNOVATION (7) Edited - New
No ratings yet
Vasudha HEALTH INNOVATION (7) Edited - New
9 pages
Sampling
No ratings yet
Sampling
15 pages
Hhgfrdghkkihhjjj
No ratings yet
Hhgfrdghkkihhjjj
287 pages
0-Daftar Penerima Sertifikat
No ratings yet
0-Daftar Penerima Sertifikat
32 pages
Habitat 67
No ratings yet
Habitat 67
6 pages
Special Power of Attorney
No ratings yet
Special Power of Attorney
2 pages
02-The 16 Human Desires
No ratings yet
02-The 16 Human Desires
3 pages
Chemistry and Envi Engg
No ratings yet
Chemistry and Envi Engg
7 pages
Easa Ad 2015-0119 1
No ratings yet
Easa Ad 2015-0119 1
5 pages
The Wondrous World of Violet Barnaby Lundquist Jenny Instant Download
No ratings yet
The Wondrous World of Violet Barnaby Lundquist Jenny Instant Download
35 pages
Quality Circle Forum of India: Problem Solving Techniques
No ratings yet
Quality Circle Forum of India: Problem Solving Techniques
75 pages
Debiprasad Chattopadhyaya History of S & T in Ancient India CH 1 Introduction
No ratings yet
Debiprasad Chattopadhyaya History of S & T in Ancient India CH 1 Introduction
79 pages
Your Order Has Been Approved
No ratings yet
Your Order Has Been Approved
5 pages
CV23370408 - Vikram Chouhan
No ratings yet
CV23370408 - Vikram Chouhan
5 pages
Darfur Now Study Guide
No ratings yet
Darfur Now Study Guide
3 pages
Paragraph Task Sheet
No ratings yet
Paragraph Task Sheet
7 pages
Organizational Behavior Study Guide
86% (7)
Organizational Behavior Study Guide
58 pages
Online Trading at Sharekhan
No ratings yet
Online Trading at Sharekhan
134 pages
What Is Systematic Investment Plan
No ratings yet
What Is Systematic Investment Plan
5 pages
Ae tt1021 Progress Test 4
No ratings yet
Ae tt1021 Progress Test 4
7 pages
CBSE Class 10 Home Science SET 4 Compartment Annual Question Paper 2018
No ratings yet
CBSE Class 10 Home Science SET 4 Compartment Annual Question Paper 2018
8 pages
Marketing Strategy of Phuc Long
No ratings yet
Marketing Strategy of Phuc Long
23 pages
Linkedin Sales Funnel
No ratings yet
Linkedin Sales Funnel
1 page
EUR Doc 025 V2.0 RNP APCH Guidance Material
No ratings yet
EUR Doc 025 V2.0 RNP APCH Guidance Material
42 pages
Redbus Ticket Information: Flat 10% O On Return Trip
No ratings yet
Redbus Ticket Information: Flat 10% O On Return Trip
1 page
Topic 3 - Process Conception, Types, Management and Measurement of Performance
No ratings yet
Topic 3 - Process Conception, Types, Management and Measurement of Performance
8 pages
Labour Law Cases
No ratings yet
Labour Law Cases
11 pages