Scribd
Upload
3 views38 pages

Report Mini Project

miniprojet

Uploaded by

mayank.sharma.ece.2023
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views38 pages

Report Mini Project

miniprojet

Uploaded by

mayank.sharma.ece.2023
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 38

Session: 2024-2025

MINI PROJECT REPORT


On
“BLOG WEBSITE”

COMPUTER SCIENCE AND ENGINEERING

Submitted to- MR : Rajesh Thakur


(Department of Information Technology)

Submitted by- Richa Chaudhary 2300680130041


Tanishq Sharma 2300680130049
Anushka tomar 2300300130017
Vansh Sharma 23006801300

3RD SEMESTER
DEPARTMENT OF INFORMATION AND
TECHNOLOGY

MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT

i
DECLARATION

We hereby declare that the project entitled - “BLOG WEBSITE”, which is being submitted as
Mini Project in department of Computer INFORMATION AND TECHNOLOGY to Meerut
Institute of Engineering and Technology, Meerut (U.P.) is an authentic record of our genuine
work done under the guidance of Prof. “MR . RAJESH THAKUR” of Computer Science and
Engineering, Meerut Institute of Engineering and Technology, Meerut.

Richa Chaudhary 2300680130041


Tanishq Sharma 2300680130049
Anushka tomar 2300300130017
Vansh Sharma 2300680130055

Date:

Place:Meerut

ii
CERTIFICATE

This is to certify that mini project report entitled – “BLOG WEBSITE” submitted by “Avantika
Sharma ” has been carried out under the guidance of Prof. “MR RAJESH THAKUR” of
information and technology, Meerut Institute of Engineering and Technology, Meerut. This
project report is approved for Mini Project (BCC 351) in 3 rd semester in “Computer Science and
engineering” from Meerut Institute of Engineering and Technology, Meerut.

Internal Examiner

Date:

iii
ACKNOWLEDGEMENT

I express my sincere indebtedness towards our guide Prof., “MR RAJESH THAKUR” of
Information and technology, Meerut Institute of Engineering and Technology, Meerut for his
valuable suggestion, guidance and supervision throughout the work. Without his king patronage
and guidance the project would not have taken shape. I would also like to express my gratitude
and sincere regards for his kind approval of the project. Time to time counselling and advises.

I would also like to thank to our HoD Dr. (Prof.) “SWATI SHARMA”, Department of
Information and technology, Meerut Institute of Engineering and Technology, Meerut for his
expert advice and counselling from time to time.

I owe sincere thanks to all the faculty members in the department of Information and technology
for their kind guidance and encouragement time to time.

Richa Chaudhary 2300680130041


Tanishq Sharma 2300680130049
Anushka tomar 2300300130017
Vansh Sharma 2300680130055

Date:

iv
Table of contents

Description page no.

Declaration ii

Certificate iii

Acknowledgement iii

Chapter 1 Introduction 1

Chapter 2 System Design 2


(Work flow/flow chart/DFD/ working principle/
constructional details of individual components)

Chapter 3 Technology Bucket 3

3.1 Description of HTML 3

3.2 Description of CSS 4

3.3 Description of Java Script 5

Chapter 4 Output screens 6-11

Appendices Implementation code 12-22

References

v
CHAPTER 1

INTRODUCTION

Our project is based on a BLOG WEBSITE . The main objective of this website is to provide
information in the form of posts . It manages all the information about new contents. The
projects is totally built at administrative end and thus only the administrator is guaranteed the
access. The purpose of the project is to built a website where people who loves to read and write
can read other peoples views and also can write their personal thoughts. Here people can write
their ideas and share them with others.

1
CHAPTER 2

DATA FLOW DIAGRAM

OUR
TEAM

CREATE CONTACT
YOUR OWN US
BLOGS
HOME
PAGE

ABOUT
US WRITE

2
CHAPTER 3

TECHNOLOGY BUCKET

3.1) Description of HTML

The <!DOCTYPE html> declaration define this document to be HTML.

The <html> tag encloses the complete HTML file and contain the header i.e.
<head>…</head> tag and the body tag i.e. <body>…</body>.

The <head> tag contains the header of the file and also contains the <title>…</title> tag
and the <style>…</style> tag of CSS.

The <title> tag contains the title of the HTML file which shows in the header of
the browser.

The <body> tag contains all the contents of an HTML document such as
headings, paragraphs, images, hyperlinks, tables, lists etc.

The <h1> tag in HTML indicates a heading on a website. Html has six different
heading tags- h1, h2, h3, h4, h5 and h6.

The <div> tag in HTML defines a division or a section in an HTML document.

3
3.2) Description of CSS

The CSS is used for describing the presentation of a document written in a markup
language like HTML.

The background-image property is used for set the image in the background. Syntax: body
{background-image: url (“file name”);}.

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a
name preceded by a hash character.

It is used to identify one element and class is used to identify more than one element.

Margin and Padding are two most commonly used properties for spacing out elements.
Margin is the space outside something and padding is the space inside something.

The hover selector is used to change the style of a button when you move the mouse over
them.

The border radius property defines the radius of the element’s corners. This property
allows you to add rounded corners to element.

4
3.3) Description of Javascript

Alongside HTML and CSS JAVASCRIPT is one of the core technologies of the World
Wide Web.

JavaScript enables interactive web pages and is an essential part of web applications.

Validating input values of a web form to make sure that they are acceptable before being
submitted to the server.

Animation of page elements such as fading them in and out resizing and moving them.

Interactive content, such as games and videos.

Loading new page content without reloading the page.

5
CHAPTER 4

OUTPUT SCREEN

Fig: 1 Home Page 1

6
Fig: 2 Home page 2

7
Fig: 3 Home page 3

8
Fig:4 Home Page 4

9
Fig: 5 Home Page 5

10
Fig: 6 Home Page 6

11
APPENDICES

IMPLEMENTATION OF CODE

HTML CODE
<!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>SarvottamHospital</title>
<link href="Hospital.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
rel="stylesheet">
<link href="media.css" rel="stylesheet" media="screen and (max-width:1021px)">
<link href="media2.css" rel="stylesheet" media="screen and (max-width:755px)">
</head>

<body>
<header id="head">
<
n
a
v

i
d
=
"
n
a
v
b
a
r
"
>
<
12
u
l

i
d
=
"
h
e
a
d
1
"
>
<li class="lists"><a href="#">Ambulance Number 70126XXXXX,
70883XXXXX</a></li>
<li class="lists"><a href="#">Emergency 0121-302XXXX| 9084XXXXXX</a></li>
</ul>
<ul id="head2">
<div id="logo">
<h4>SARVOTTAM HOSPITAL</h4>
</div>
<div id="main">
<li class="lists"><a href="#">Home</a></li>
<li class="lists"><a href="#">Our Team</a></li>
<li class="lists"><a href="#">Contact Us</a></li>
<li class="lists"><a href="#">About Us</a></li>

13
</div>
<div id="right">
<button id="btn">Register</button>
</div>
</ul>
</nav>
</header>
<div id="big">
<div id="container">
<h2 id="slogan">"Self Care is the new health care"</h2>
<button class="book">Book an appointment</button>
</div>
</div>
<div id="high">
<div class="exp">+3
<div class="expli">year of establishment</div>
</div>
<div class="exp">500+
<div class="expli">smiling clients</div>
</div>
<div class="exp">100+
<div class="expli">hopless cases solved</div>
</div>
<div class="exp">500+
<div class="expli">staff</div>
</div>
</div>
<div id="sep">TOP MEDICAL PROCEDURE</div>
<div id="procedures">
<div class="tech">
<h3 class="stu"> ORTHOPAEDICS AND TRAUMA</h3>
<p class="stu">
Trauma and orthopaedic (T&O) surgeons diagnose and treat conditions of the
musculoskeletal
system including bones and joints and structures that enable movement such as
ligaments, tendons,
muscles and nerves.
</p>
</div>
<div class="tech">
<h3 class="stu">NEUROLOGY</h3>
<p class="stu">

14
Neurologists diagnose, treat and manage
and conditions affecting the brain and spinal cord,

disorders of the nerves and muscles that activate


movement and transmit sensations
from around the body
to the brain.
</p>
</div>
<div class="tech">
<h3 class="stu">CARDIOLOGY</h3>
<p class="stu">
Cardiology is a medical specialty and a branch of internal medicine concerned with
disorders
of the heart. It deals with the diagnosis and treatment of such conditions as congenital
heart defects,
coronary artery disease, electrophysiology, heart failure and valvular heart disease.
</p>
</div>
<div class="tech">
<h3 class="stu">KNEE REPLACEMENT</h3>
<p class="stu">
Replacing the disease or damaged joint surfaces with metal components and plastic
components
with absolute precision. Knee & Hip Replacement, Arthroscopy, Complex Trauma
Management
</p>
</div>
<div class="tech">
<h3 class="stu">PEDIASTRICS</h3>
<p class="stu">
State-of-the-Art Neonatal Intensive Care Unit, Developmental Pediatrics Facilities,
Vaccination and Painless care in Pediatrics.
</p>
</div>
<div class="tech">
<h3 class="stu">ENDROCRINE SURGERIES</h3>
<p class="stu">
Robotic Surgery Bariatric Surgery Breast Surgery Thyroid Surgery Endocrine Surgical
Problem
Aesthetic Thyroid Surgery Scarless Thyroidectomy.
</p>
</div>
</div>
15
<div id="contactus">

15
<form>
<h1>Contact Us</h1>
<div id="elements">
Name <input class="input" type="text">
<br>Phone No. <input class="input" type="tel">
<br>Email <input class="input" type="email">
<br>State <input class="input" type="text">
<br>Enter messsage <br><textarea class="input" rows="13" cols="70"></textarea>
<br><button id="submit" class="book">Submit</button>
</div>
</form>
</div>
<div id="content">
<h2 id="abt">About Us</h2>
<p class="pere">
Self Care is the new health care. Sarvottam Hospital was established in 2010 with a
motive to
make the world healthier by providing health services. Sarvottam Hospital is providing
medical care services
at an affordable rates to underserve communities across the country. We have
comprehensive patient care set
up to provide world class treatment.
</p>
</div>
<footer>
<div id="footer">
<div id="column1" class="column">
<h3 class="foot">Sarvottam Hospital<br>Meerut</h3>
<p class="para">Leading the way in medical execllence,<br>trusted care</p>
</div>
<div id="column2" class="column">
<h3 class="foot">Address</h3>
<p class="para">Near Shiv mandir,Hapur road, Meerut, Uttar Pradesh, India</p>
<p class="para">[email protected]</p>
<p class="para">Emergency 0121-302XXXX| 9084XXXXXX</p>
</div>
<div id="column3" class="column">
24 hours services<br>+91124 XXX XXXXX
<button id="app">Request an Appointment</button>
</div>
</div>
</footer>
</body>

16
</html>

CSS CODE
body {
margin: 0cm;
padding: 0cm;
}

.lists {
display: inline-block;
padding: 0cm 0.7cm;
}

.lists a {
text-decoration: none;
color: black;
}

#head1 {
background-color: palevioletred;
margin: 0cm;
padding: 0.4cm;
text-align: center;
font-size:
1.2 rem;
}

#head2
{ display:
flex;
align-items: center;
justify-content: space-between;
height: 2cm;
margin:
0cm; font-
size:
1.3 rem;
background-color: rgb(247, 231, 231);
}

17
#logo {
width: 3.5cm;

18
text-align:
center;

19
text-shadow: 1px 1px 2px grey;
}

#right {
width: 3.5cm;
}

#btn {
background-color: rgb(230, 140, 170);
padding: 0.15cm 0.5cm;
border: none;
font-size:
1rem;
border-radius: 6px;
box-shadow: 2px 2px 3px gray;
}

#btn:hover {
background-color: palevioletred;
cursor: pointer;
}

#head2 .lists a:hover


{ color: brown;
}

#big {
background-image: url("https://media.istockphoto.com/photos/doctor-in-hospital-
background- with-copy-space-picture- id949812160?
b=1&k=20&m=949812160&s=170667a&w=0&h=lqhc1XhEU-
2HswOyNAGOws7Y9tJng0rs47dN8TNF7a4=");
height: 15cm;
width: 100%;
padding: 0.5cm 0cm;
background-size: 100%;
}

#container
{ width:
13cm; height:
10cm;
margin: 3cm 1.5cm;
border-radius: 20px;
display: flex;
20
flex-direction: column;

21
align-items: center;
}

#slogan {
text-align:
center; font-size:
3rem;
font-family: 'Plus Jakarta Text
Bold'; text-shadow: 1px 1px 2px
gray;
}

.book {
width: 8cm;
padding: 0.4cm
1cm;
background-color: rgb(230, 140, 170);
border-radius: 25px;
font-size: 1.2rem;
border: none;
box-shadow: 3px 3px 3px gray;
}

.book:hover {
background-color: palevioletred;
cursor: pointer;
border: none;
}

#head {
position: sticky;
top: 0px;
box-shadow: 1px 1px 8px gray;
}

.expli {
font-size: 1.1rem;
width: 5cm;
height: 2cm;
}

#high {
background-color: rgb(167, 87, 114);
display: flex;
22
justify-content: space-around;
height: 4cm;

23
color: white;
}

.exp {
text-align: center;
font-size:
3.2rem; margin-
top: 1cm;
}

#content
{ height:
15cm;
font-size: 1.7rem;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}

#abt {
color: rgb(167, 87, 114);
text-shadow: 1px 1px 2px gray;
}

.pere {
text-align: justify;
width: 15cm;
}

#footer {
background-color: rgb(167, 87, 114);
display: flex;
justify-content: space-around;
}

#column1
{ width:
8cm; height:
5cm;
}

#column2
24
{ width:
10cm;

25
height: 9cm;

26
}

#column3
{ width:
5cm; height:
5cm;
padding-top: 1cm;
}

.column {
align-content: center;
font-size: 1.2rem;
margin-top: 2cm;
}

#app {
width: 4.5cm;
height: 1cm;
background-color: rgb(216, 133, 161);
font-size: 0.8rem;
border-radius: 25px;
border: none;
box-shadow: 1px 1px 5px rgb(41, 41, 41);
}

#app:hover {
background-color: rgb(206, 119, 149);
}

#procedures {
background-color: rgb(248, 215, 220);
display: flex;
justify-content: center;
width: 100%;
height: 23cm;
flex-flow: row
wrap; align-
items: center;
}

.tech {
width: 14cm;
height: 6cm;
margin: 0.2cm;
27
font-size: 1.125rem;

28
background-color: rgb(251, 225, 229);
border: 1px solid rgb(248, 187, 197);
box-shadow: 0.1cm 0.1cm 8px rgb(248, 187, 197);
}

#sep {
text-align: center;
background-color: rgb(248, 215, 220);
padding-top: 2cm;
padding-bottom: 1cm;
font-size: 2rem;
text-shadow: 1px 1px 2px gray;
}

.stu {
padding: 0.4cm;
text-align:
justify;
}

form {
height: 22.6cm;
display: flex;
flex-direction:
column; align-items:
center;
background-color: rgb(252, 239, 239);
}

.input {
padding: 12px;
width: 17cm;
border-radius: 8px;
border: none;
box-shadow: 1px 1px 2px gray;
}

#elements
{ display:
flex;
flex-direction:
column; font-size:
1.2rem;
}
29
h1 {
margin-top: 2cm;

30
margin-bottom:
1cm; margin-right:
1cm; font-size:
2.5rem;
text-shadow: 1px 1px 3px gray;
}

#submit {
margin-left: 5cm;
}

31
REFERENCES

https://www.w3schools.com
https://en.wikidepia.org

32

You might also like