MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY

Session: 2023-2024

MINI PROJECT REPORT

On

“RESPONSIVE BLOG WEBSITE”

BACHELOR OF TECHNOLOGY IN COMPUTER
SCIENCE AND ENGINEERING
Submitted to-
Mr. Rajravi Kumar Ram
(Department of Computer Science & Engineering)

Submitted by-
Student name1: Reshita Chaudhary Roll No. 2200680100258
Student name2: Rishika Yadav Roll No. 2200680100261

3RD SEMESTER
DEPARTMENT OF COMPUTER
SCIENCE AND ENGINEERING/IT/EC/EE/BT/ME
MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT

Page:1
 DECLARATION

We hereby declare that the project entitled - “Responsive Blog Website”, which is being submitted
as Mini Project in department of Computer Science and engineering to Meerut Institute of
Engineering and Technology, Meerut (U.P.) is an authentic record of our genuine work done under
the guidance of Assistant Prof. “Rajravi Kumar Ram” of Computer Science and Engineering,
Meerut Institute of Engineering and Technology, Meerut.

Date: 24-November-2023 Name of student1: Reshita Chaudhary

Roll no.: 2200680100258

Place: Meerut

Name of student 2: Rishika Yadav

Roll no.: 2200680100261

Page:2
 CERTIFICATE

This is to certify that mini project report entitled – “Responsive Blog Website” submitted by
“Reshita Chaudhary” and “Rishika Yadav” has been carried out under the guidance of Assistant
Prof. “Mr. Rajravi Kumar Ram” of Computer Science and Engineering, Meerut Institute of
Engineering and Technology, Meerut. This project report is approved for Mini Project (KCN 354)
in 3rd semester in “department name” from Meerut Institute of Engineering and Technology,
Meerut.

Internal Examiner: Mr. Rajravi Kumar Ram

Date: 24-Nov-23

Page:3
 ACKNOWLEDGEMENT

I express my sincere indebtedness towards our guide Prof., “Mr. Rajravi Kumar Ram” of Computer
Science and Engineering, 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 counseling and advises.

I would also like to thank to our HoD Dr. (Prof.) “Mukesh Rawat”, Department of Computer
Science and engineering, Meerut Institute of Engineering and Technology, Meerut for his expert
advice and counseling from time to time.

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

Date: 24-Nov-23 Student name 1: Reshita Chaudhary

Student name 2: Rishika Yadav

Page:4
 TABLE OF CONTENT

Declaration I
Certificate II
Acknowledgement III
1. Introduction
2. Workflow/Flowchart
3. Output Screen
4. Source Code
5. References

Page:5
 Introduction

A responsive blog website is a website that adapts to the screen size of the device it is
being viewed on. This means that the website will look good and be easy to use on any
device, whether it’s a desktop, tablet, or phone. To create a responsive blog website
using HTML and CSS, you can follow these steps:

1. Create the basic structure of your website: Start by creating the basic structure
of your website using HTML. This includes adding the header, footer, navigation
bar, and content area.
2. Add styles to your website: Once you have created the basic structure of your
website, you can add styles to it using CSS. This includes setting the font size,
color, background color, and layout of your website.
3. Make your website responsive: To make your website responsive, you can use
CSS media queries. Media queries allow you to apply different styles to your
website based on the screen size of the device it is being viewed on.
4. Test your website: Finally, test your website on different devices to make sure
that it looks good and is easy to use on all of them.

A responsive blog website has several benefits:

1. Improved user experience: A responsive blog website ensures that users have
an optimal experience no matter how they access a website. The content will
render differently depending on the device or screen size.
2. Increased mobile traffic: According to a report from SimilarWeb, more than
half of traffic to top websites in the U.S. came from mobile devices in 2015. By
creating a responsive blog website, you can ensure that your site is accessible to
mobile users.
3. Faster page load times: Responsive web design ensures that sites load quickly
without any distortions, so users don’t need to manually resize anything to view
content .
4. Lower maintenance needs: By creating a single responsive blog website instead
of multiple versions for different devices, you can reduce maintenance needs and
save time.
5. Higher conversion rates: A responsive blog website can lead to higher
conversion rates as users are more likely to stay on a site that is easy to use and
navigate .

Page:6
To create a responsive blog website using HTML and CSS, you need to have knowledge
of these two languages. HTML is used for creating the structure of the webpage while
CSS is used for styling it. You also need to have knowledge of media queries in CSS
for making your website responsive.

OBJECTIVE
1. Sharing Content: A blog website provides a platform for individuals or
organizations to share their thoughts, ideas, experiences, and insights on various
topics.
2. Engagement: It aims to foster engagement and discussion among readers and
the blog owner through comments and feedback.
3. Community Building: The blog website serves as a community hub where like-
minded individuals can connect and share ideas.
4. Personal Branding or Professional Development: It can be used as a tool for
personal branding or professional development, allowing the blog owner to
establish themselves as an expert in a particular field.
5. Marketing or Advocacy: Depending on the blog owner’s goals, the website can
also serve as a marketing tool for businesses or an advocacy platform for causes.

TECHNOLOGY USED :-

a) HTML : HTML, or HyperText Markup Language, is crucial in blog website

development. It structures the content, making it readable and navigable. HTML
tags define elements like headings, paragraphs, links, and images, enhancing the
user experience. It’s the foundation of any blog website, enabling rich, diverse
content presentation.

b) CSS : CSS, or Cascading Style Sheets, is essential in blog website design. It

controls the visual presentation of the site, including layout, colors, fonts, and
animations. CSS ensures consistency across the website, enhances user
experience, and allows for responsive design, making the blog visually appealing
and accessible on various devices.

Page:7
FLOWCHART

Page:8
OUTPUT SCREEN

Page:9
Page:10
Page:11
 SOURCE CODE
INDEX.HTML

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Magical blog</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/utils.css">
<link rel="stylesheet" href="css/mobile.css">
</head>

<body>
<nav class="navigation max-width-1 m-auto">
<div class="nav-left">
<span>Magical Blog</span>

<ul>
<li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="/contact.html">Contact</a></li>

</ul>

</div>
<div class="nav-right">
<form action="/search.html" method="get">
<input class="form-input" type="text" name="query"
placeholder="Article Search">
<button class="btn">Search</button>
</form>

</div>
</nav>

Page:12
 <div class="max-width-1 m-auto">
<hr>
</div>
<div class="content max-width-1 m-auto my-2">
<div class="content-left">
<h1>Magical Bloggers</h1>
<p>Magical blog is a website which lets you submit an article which
upon approval will be up on our website
and you can get a good amount of reach from here. Magical
bloggers can be described as a platform that
provides informative and entertaining content to its readers. Its
highly practical and on-point
selection of topics enables the readers to grasp an understanding
of the most unacquainted topics with
utmost ease.</p>
</div>
<div class="content-right">
<img src="img/home.jpg" alt="Magical blog">

</div>

</div>

<div class="max-width-1 m-auto">

<hr>
</div>
<div class="home-articles max-width-1 m-auto font2">
<h2>Featured Articles </h2>
<div class="year-box adjust-year">
<div>
<h3>Year </h3>
</div>
<div>
<input type="radio" name="year" id=""> 2022
</div>
<div>
<input type="radio" name="year" id=""> 2023
</div>
</div>

<div class="home-article">
<div class="home-article-img">
<img src="img/img2.jpg" alt="article">
</div>

Page:13
 <div class="home-article-content font1">
<a href="/blogpost.html">
<h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Asperiores totam est ea repellat
architecto!</h3>
</a>
<span>Author name</span>
<span>15 september | 10 min read</span>
</div>

</div>
<div class="home-article">
<div class="home-article-img">
<img src="img/img3.jpg" alt="article">
</div>
<div class="home-article-content font1">
<a href="/blogpost.html">
<h3>Lorem ipsum dolor sit amet.</h3>
</a>

<span>Author name</span>
<span>4 september | 7 min read</span>
</div>

</div>
<div class="home-article">
<div class="home-article-img">
<img src="img/img5.webp" alt="article">
</div>
<div class="home-article-content font1">
<a href="/blogpost.html">
<h3>Lorem ipsum dolor sit amet.</h3>
</a>

<span>Author name</span>
<span>4 september | 7 min read</span>
</div>

</div>
</div>

Page:14
 <div class="footer">
<p>Copyright &copy; Magical_Blog.com </p>
<a href="http://www.vecteezy.com/free-vector/typewriter">Vector Credits:
Vecteezy</a>
</div>
</body>

</html>

SEARCH.HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Magical blog</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/utils.css">
<link rel="stylesheet" href="css/mobile.css">
</head>

<body>
<nav class="navigation max-width-1 m-auto">
<div class="nav-left">
<a href="/">
<span><img src="img/logo.png" width="150px" alt=""></span>
</a>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="/contact">Contact</a></li>

</ul>

</div>
<div class="nav-right">
<form action="/search.html" method="get">
<input class="form-input" type="text" name="query"
placeholder="Article Search">

Page:15
 <button class="btn">Search</button>
</form>

</div>
</nav>

<div class="max-width-1 m-auto"><hr>

</div>

<div class="home-articles max-width-1 m-auto font2">

<h2>Search Results For </h2>
<div class="year-box adjust-year">
<div>
<h3>Year </h3>
</div>
<div>
<input type="radio" name="year" id=""> 2022
</div>
<div>
<input type="radio" name="year" id=""> 2023
</div>
</div>
<div class="home-article">
<div class="home-article-img">
<img src="img/img1.jpg" alt="article">
</div>
<div class="home-article-content font1">
<a href="/blogpost.html">
<h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Odit, voluptatum saepe.</h3>
</a>

<span>Author name</span>
<span>4 october | 30 min read</span>
</div>

</div>
<div class="home-article">
<div class="home-article-img">
<img src="img/img2.jpg" alt="article">
</div>
<div class="home-article-content font1">
<a href="/blogpost2.html">

Page:16
 <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Asperiores totam est ea repellat
architecto!</h3>
</a>
<span>Author name</span>
<span>15 september | 10 min read</span>
</div>

</div>
<div class="home-article">
<div class="home-article-img">
<img src="img/img3.jpg" alt="article">
</div>
<div class="home-article-content font1">
<a href="/blogpost3.html">
<h3>Lorem ipsum dolor sit amet.</h3>
</a>

<span>Author name</span>
<span>4 september | 7 min read</span>
</div>

</div>
</div>
<div class="footer">
<p>Copyright &copy; Magical_Blog.com </p>
<a href="http://www.vecteezy.com/free-vector/typewriter">Vector Credits:
Vecteezy</a>
</div>
</body>

</html>

CONTACT.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

Page:17
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/utils.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/contact.css">
<link rel="stylesheet" href="css/mobile.css">
<title>Magical Blog</title>
</head>
<body>
<nav class="navigation max-width-1 m-auto">
<div class="nav-left">
<a href="/">
<span><img src="img/logo.png" width="145px" alt=""></span>
</a>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="nav-right">
<form action="/search.html" method="get">
<input class="form-input" type="text" name="query"
placeholder="Article Search">
<button class="btn">Search</button>
</form>

</div>

</nav>
<div class="max-width-1 m-auto">
<hr>
</div>
<div class="contact-content font1 max-width-1 m-auto">
<div class="max-width-1 m-auto mx-1">
<h2>Feel Free to Contact Us</h2>
<div class="contact-form">
<div class="form-box">
<input type="text" placeholder="Enter Your Name">
</div>
<div class="form-box">
<input type="text" placeholder="Enter Your Phone Number">
</div>
<div class="form-box">
<input type="text" placeholder="Enter Your Email Id">

Page:18
 </div>
<div class="form-box">
<textarea name="" id="" cols="30" rows="10" placeholder="How
may we help you?"></textarea>
</div>
<div class="form-box">
<button class="btn">Submit</button>
</div>

</div>
</div>

</div>

<div class="footer">
<p>Copyright &copy; Magical_Blog.com </p>
<a href="https://www.vecteezy.com/free-vector/typewriter">Vector
Credits: Vecteezy</a>
</div>
</body>
</html>

BLOGPOST.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/utils.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/blogpost.css">
<link rel="stylesheet" href="css/mobile.css">
<title>Magical Blog</title>
</head>
<body>
<nav class="navigation max-width-1 m-auto">
<div class="nav-left">
<a href="/">
<span><img src="img/logo.png" width="94px" alt=""></span>
</a>

Page:19
 <ul>
<li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="nav-right">
<form action="/search.html" method="get">
<input class="form-input" type="text" name="query"
placeholder="Article Search">
<button class="btn">Search</button>
</form>

</div>

</nav>
<div class="max-width-1 m-auto">
<hr>
</div>
<div class="post-img">
<img src="img/img4.jpg" alt="">
</div>
<div class="m-auto blog-post-content max-width-2 m-auto my-2">
<h1 class="font1">Magical Blog</h1>
<div class="blogpost-meta">
<div class="author-info">
<div>
<b>
Author - Bill Gates (CEO Microtek)
</b>
</div>
<div>04 January. 6 min read</div>
</div>
<div class="social">
<svg width="29" height="29" class="hk"><path d="M22.05 7.54a4.47
4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1
5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-
.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0
4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0
12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-
1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path></svg>

<svg style="background: black;

border-radius: 21px></path></svg>

Page:20
 <svg width="29" height="29" class="hk"><path
d="M23.2"></path></svg>

</div>
</div>
<p class="font1">In communications and information processing, code is a
system of rules to convert information—such as a letter, word, sound, image, or
gesture—into another form, sometimes shortened or secret, for communication
through a communication channel or storage in a storage medium.</p>
<p class="font1">In communications and information processing</p>
</div>

<div class="max-width-1 m-auto"><hr></div>

<div class="home-articles max-width-1 m-auto font2">
<h2>People who read this also read</h2>
<div class="row">

<div class="home-article more-post">

<div class="home-article-img">
<img src="img/img5.webp" alt="article">
</div>
<div class="home-article-content font1 center">
<a href="/blogpost.html"><h3>Learn more about Machine Learning
techniques in India by joining this channel</h3></a>

<div>Author Name</div>
<span>07 January | 6 min read</span>
</div>
</div>
<div class="home-article more-post">
<div class="home-article-img">
<img src="img/img3.jpg" alt="article">
</div>
<div class="home-article-content font1 center">
<a href="/blogpost.html"><h3>Learn more about Machine Learning
techniques in India by joining this channel</h3></a>

<div>Author Name</div>
<span>07 January | 6 min read</span>
</div>
</div>
<div class="home-article more-post">

Page:21
 <div class="home-article-img">
<img src="img/img2.jpg" alt="article">
</div>
<div class="home-article-content font1 center">
<a href="/blogpost.html"><h3>Learn more about Machine Learning
techniques in India by joining this channel</h3></a>

<div>Author Name</div>
<span>07 January | 6 min read</span>
</div>
</div>

</div>
</div>

<div class="footer">
<p>Copyright &copy;Magical_Blog.com </p>
<a href="https://www.vecteezy.com/free-vector/typewriter">Vector
Credits: Vecteezy</a>
</div>
</body>
</html>

UTILS.CSS

@import
url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@500&family=Robo
to&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@500&family=Robo
to&display=swap');

:root {
--main-bg-color: rgb(0, 109, 128);
--font1: 'Baloo Bhaina 2', cursive;
--font2: 'Roboto', sans-serif;

Page:22
}
.font1{
font-family: var(--font1);
}
.font2{
font-family: var(--font2);
}

.max-width-1 {
max-width: 80vw;
}

.max-width-2 {
max-width: 60vw;
}
.my-2{
margin-top: 32px;
margin-bottom: 32px;
}

.m-auto {
margin: auto;
}

.btn {
padding: 0px 20px;
padding-top: 3px;
border: 2px solid black;
border-radius: 6px;
font-family: var(--font1);
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease-in-out;

.btn:hover {
color: white;
background-color: var(--main-bg-color);
}

.form-input {
padding: 0px 5px;
padding-top: 3px;

Page:23
 font-size: 16px;
border: 2px solid black;
border-radius: 4px;
margin: 0 4px;
font-family: var(--font1);
}

STYLE.CSS

* {
margin: 0;
padding: 0;
}

.navigation {
margin-top: 25px;
font-family: var(--font1);
height: 74px;
/*background-color: red;*/
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.9vw;
}

nav-left {
display: flex;
}

nav-left span {
font-size: 35px;
padding-top: 10px;
}

.nav-left ul {
display: flex;
align-items: center;
margin: 0 77px;
font-size: 20px;
padding-bottom: 23px;
}

.nav-left ul li {

Page:24
 list-style: none;
margin: 0 14px;
font-family: var(--font2);
transition: all 0.3s ease-in-out;
}

.nav-left ul li a {
text-decoration: none;
color: black;
}

.nav-left ul li a:hover {
color: var(--main-bg-color);
/*background-color: var(--main-bg-color);*/
font-weight: bolder;
}

.content
{
display: flex;
height: 350px;
width:1000px;
/* background-color: rgb(224, 224, 240);*/
margin-top : 32px;
padding: 9px;
position: relative;
}

.content::after {
content: "";
background-image: url(../img/img6.jpg);
position: absolute;
width: 1030px;
height: inherit;
opacity: 0.15;
border-radius: 12px;
}

.content-left {
font-family: var(--font1);
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px;

Page:25
}

.content-right {
display: flex;
align-items: center;
justify-content: center;
}

.content-right img {
height: 300px;
width: 300px;
border: 2px solid black;
border-radius: 400px;
padding: 2px;

.home-articles {
padding-top: 15px;
background-color: rgb(219, 231, 231, 0.5);
margin-top: 23px;
}

.home-article img {
width: 140px;
height: 150px;
margin: 10px;;
}

.home-article {
display: flex;
margin: 25px;
margin-top: 5px;

.home-article-content {
align-self: center;
padding: 0px 25px;
}

.home-article-content a{
text-decoration: none;
color: black;

Page:26
}
/*.home-articles{}*/

.footer {
height: 50px;
background-color: var(--main-bg-color);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-direction: column;
}

.footer a {
color: white;
}

CONTACT.CSS
.contact-content{
height: 100vh;
margin-top: 32px;
padding: 9px;
position: relative;
overflow: hidden;
}

.contact-content::after {
content: "";
background-image: url("../img/img6.jpg");
position: absolute;
top:0;
width: 100%;
height: inherit;
opacity: 0.15;
border-radius: 12px;
z-index: -1;
}

Page:27
MOBILE.CSS
@media screen and (max-width: 1200px) {
.navigation {
flex-direction: column;
margin-bottom: 23px;
}

.nav-left {
flex-direction: column;
text-align: center;
}

.content-right {
display: none;
}

.home-article {
flex-direction: column;
}

.home-article-img {
text-align: center;
}

.year-box {
top: 25px;
left: 60vw;
font-size: 11px;
display: flex;
}

.year-box div {
padding: 0 3px;
margin: 0;
}

.home-article img {
width: 70vw;
}
.form-input {
width: 50%;
}
.form-box input,
textarea {

Page:28
 width: 66vw;
}
.row {
flex-direction: column;
}
.social {
padding: 0;
}
.post-img {
height: auto;
}
.adjust-year {
position: static;
height: auto;
padding: 12px 0px;
display: flex;
justify-content: flex-end;
width: 100%;
}
}

BLOGPOST.CSS
.post-img{
height: 404px;
overflow: hidden;
}
.post-img img{
width: 100%;
}

.blog-post-content h1{
text-align: center;
}
.blog-post-content p{
font-size: 18px;
}

.row{
display: flex;
}
.more-post{
flex-direction: column;
align-items: center;
}

Page:29
.blogpost-meta{
display: flex;
justify-content: space-between;
}

.author-info{
margin: 12px 0;
}
.author-info div{
padding: 4px 0px;
font-family: var(--font2);
}
.social{
padding-right: 53px;
align-self: center;
cursor: pointer;
}

Page:30
REFERENCES
1. GitHub Topics
2. Code Geekz
3. WordPress.com
4. Tumblr
5. Wix
6. Code with Harry
7. Blogger

Page:31