A SUBMISSION OF MICRO PROJECT ENTITLED

“Develop A Smartphone Specification Website"

BY
1. Ms. Bhakti Ramsharan Dahariya
2. Mr. Sunil Bhagwan Salunke
3. Ms. Payal Gorakhnath Fandade
DIPLOMA IN
COMPUTER ENGINEERING
UNDER THE GUIDANCE OF
Ms. S. Samrat
TO

DEPARTMENT OF COMPUTER SCIENCE ENGINEERING

CSMSS COLLEGE OF POLYTECHNIC,
AURANGABAD
AND
MAHARASHTRA STATE BOARD OF TECHNICAL
 EDUCATION
MSBTE,
MUMBAI (M.S)
 CERTIFICATE

This is to certify that Following Students Mr.Shivam Singh Mr.Payal

Gorakhnath Fandade Payal Gorakhnath Fandade of Fifth semester of Diploma
in Computer Engineering of Institute CSMSS College of Polytechnic
(code:1152) have completed the Micro Project satisfactorily in subject CLIENT
SIDE SCRIPTING (22519)for the academic year 2021-2022 as prescribed in the
curriculum.
Place: Aurangabad
Date:

Sr. Name of Student Enrollment No.

No.

1 BHAKTI RAMSHARAN DAHARIYA 1911520048

2 PAYAL GORAKHNATH FANDADE 2011520305

3 SUNIL BHAGWAN SALUNKE 1911520086

PROJECT GUIDE HEAD OF DEPARTMENT

PRINCIPAL
 ACKNOWLEDGEMENT

We would like to express our thanks to the people who have helped us most
throughout our project. We would like to express our sincere thanks to the principal of
CSMSS College of Polytechnic Prof. Ganesh B. Dongre for being always with us as a
motivator. We are thankful to the H.O.D. of Computer Engineering Department Ms.
Bhakti Dahariya Mr.Susinil Salunke Ms. Payal Fandade for her kind support. We
are grateful to our Project Guide Ms. S. Samrat for nonstop support and continuous
motivation for the project. His help made us possible to complete our project with all
accurate information. A special thanks of our goes to our friends who helped us
in completing the project, where they all exchanged their own interesting ideas.
We wish to thanks our parents for their personal support or attention who inspired us
to go our own way. Finally, we would like to thank God who made all things
possible for us till the end.

Sr. No. Name of Student Sign

1 BHAKTI RAMSHARAN DAHARIYA

2 PAYAL GORAKHNATH FANDADE

3 SUNIL BHAGWAN SALUNKE

 INDEX

1. MICRO - PROJECT PROPOSAL.....................................................................1 - 3

2. RATIONALE ……………………………………………………. 4

3. AIMS / BENEFITS OF THE MICRO - PROJECT……………… 4

4. COURSE OUTCOMES ACHIEVED …………………………… 4

5. LITERATURE REVIEW.....................................................................................5 - 14

4. ACTUAL RESOURCES USED............................................................................14

5. ACTUAL METHODOLOGY FOLLOWED.................................................15 – 17

6. OUTCOMES OF THE MICRO - PROJECT.................................................17 - 19

9. SKILL DEVELOPED / LEARNING OUTCOMES

OF MICRO-PROJECT........................................................................................20

10. APPLICATIONS OF MICRO - PROJECT........................................................20

 PLAN A

 Title of Micro-project :- Develop a smartphone specification website.

 Brief Introduction :- In this project we have developed a smartphone

specification website using JavaScript , HTML and CSS
Used JavaScript to make website more attractive and easy to use so that anyone
visits website will easily understands content of website
 Aim of the Micro-project :- To Study How to Create Website for
Smartphones Specification Website using HTML CSS JavaScript

 Resource Required :-

Sr. Name of specifications Qty Remark

No resources/
material
1. Computer System Desktop 1
2. Software VS Code 1

 Action Plan :-

Sr. Details of activity Planned Planned Name of team

No start date finish date member
1. Select topic of 5/01/21 5/01/21 All member
micro-project.
2. Collect information 09/01/21 13/01/21 All member
about topic.
3. Prepare report on 28/01/21 02/02/21 All member
project submit the
micro-project
 PLAN B

 Title of Micro-project :- Develope a smartphone specification website.

 Brief Introduction :- In this project we have developed a smartphone

specification website using JavaScript , HTML and CSS
Used JavaScript to make website more attractive and easy to use so that anyone
visits website will easily understands content of website

 Aim of the Micro-project :- To Study How to Create Website for

Smartphones Specification Website using HTML CSS JavaScript

 Course Outcomes :-

o Learned to make interactive website using JavaScript

 Actual Methodology followed :-

o First we discussed and decided the topic of project
o Did some research on the selected topic
o Create a website
o Showed Project to the subject teacher
o Created project report
o Submitted to the teacher
 Resource Required :-

Sr. Name of specifications Qty Remark

No resources/
material
1. Computer System Desktop 1
2. Software VS code 1
 HTML Code :-
<!DOCTYPE html>

<html>

<head>

<title>Website Design Using HTML and CSS</title>

<link rel=”stylesheet” href=”style-1.css”>

</head>

<body>

<div class=”main”>

<nav>

<div class=”logo”>

<img src=”images/logo.png”>

</div>

<div class=”nav-links”>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Phone</a></li>

<li><a href=”#”>Accessories</a></li>

<li><a href=”#”>Cart</a></li>

</ul>

</div>

</nav>

<div class=”information”>

<div class=”overlay”></div>

<img src=”img/mobile.png” class=”mobile”>

 <div id=”circle”>

<div class=”feature one”>

<img src=”images/camera.png”>
<div>

<h1>Camera</h1>

<p>12MP , Wide Angle Lens</p>

</div>

</div>

<div class=”feature two”>

<img src=”img/processor.png”>

<div>

<h1>Processor</h1>

<p>Snapdragon Octa-core 11nm</p>

</div>

</div>

<div class=”feature three”>

<img src=”img/display.png”>

<div>

<h1>Display</h1>

<p>6.5” Mini-Drop Fillscreen</p>

</div>

</div>

<div class=”feature four”>

<img src=”img/battery.png”>

<div>

<h1>Battery Life</h1>

<p>5000mAH, 72hrs Standby</p> </div> </div>

</div>
 </div>
</div>

<div class=”controls”>

<img src=”img/arrow.png” id=”upBtn”>

<h3>Features</h3>
<img src=”img/arrow.png” id=”downBtn”>

</div>

<!-- ><script src=”” async defer></script>

<script>

Var circle =
document.getElementById(“circle”); Var
upBtn = document.getElementById(“upBtn”);
Var downBtn = document.getElementById(“downBtn”);

Var rotateValue =
circle.style.transform; Var
rotateSum;

upBtn.onclick = function(){

rotateSum = rotateValue + “rotate(-

90deg)”; circle.style.transform =
rotateSum; rotateValue = rotateSum;
}

downBtn.onclick = function()

rotateSum = rotateValue + “rotate(90deg)”;

circle.style.transform =
rotateSum; rotateValue =
rotateSum;
 }

</script>

</body>
</html>
 CSS Code :-

*{

Margin: 0;

Padding: 0;

Font-family: sans-serif;

.main{

Width:
100%;
Height:
100vh;
Position:
relative;
Overflow:
hidden;
Background: linear-gradient(to right , #9c27b0, #8ecdff);

Nav{

Width: 80%;
Position:
sticky;
Margin: 20px
auto; z-index:
1; display:
flex;
align-items: center;

}
.logo {

Flex-basis: 20%;

.logo img{
Width: 150px;

.nav-
link
s{
Fle
x:
1;
Text-align: right;

.nav-links ul
li{ Line-
style: none;
Display: inline-
block;

Margin: 0 20px;

.nav-links
ul li a{
Color:
#fff;
Text-decoration: none;

.information{
Width:
1000px;
Height:
1000px;
Position:
absolute; Top:
50%;
 Left: -10%;

Transform: translateY(-50%);

#circle{

Width:
1000px;

Height:
1000px;

Position:
absolute;

Top: 0;

Left: 0;

Border-radius: 50%;
Transform:
rotate(0deg);
Transition: 1s;
}

.feature
img{ Wi
dth:
70px;
}

.feature {

Position:
absolute;
Display: flex;
Color: #fff;
}

.feature div{

Margin-left: 30px;

}
.feature div p{
Margin-top:
8px;
}

.one{

Top:
450px;

Right:
50px;

.two{

Top:
150px;

Left:
350px;

Transform: rotate(-90deg);

}.three{

Bottom:
450px;

Left: 50px;

Transform: rotate(-180deg);

}.four{

Bottom:
150px;

Right:
350px;

Transform: rotate(-270deg);

.mobile{

Width: 200px;

Position:
 absolute;

Top: 50%;

Left: 35%;

Transform: translateY(-
50%); z-index: 1;
}

.controls{

Position:
absolute;
Right: 10%;
Top: 50%;

Transform: translateY(-50);

.controls h3{
Margin:
15px 0;
Color:#fff;
}

#upBtn{

Width:
15px;

Cursor:
pointer;

#dowpoint{

Width:
15px;
Cursor:
pointer;
Transform: rotate(180deg);
}
.overlay{
 Hight: 0;

Width: 0;

Border-right: 500px solid

transparent; Border-top: 500px
solid #fff;
Border-bottom: 500px
solid #fff; Border-left:
500px solid #fff; Position:
aboslute;
Left: 0;

Top: 0;

 Output :-