CSS Microproject Report2

A
Project Report
On
Develope a smartphone specification website
Maharashtra State Board of Technical Education, Mumbai

For the Partial fulfillment of
Diploma in Computer Engineering
Submitted by:
Roll No. 3239 Baburav Mestry

Roll No. 3209 Pratik Korgaonkar
Roll No. 3244 Sahil Gaonkar
Under the Guidance of

Mrs. T.V.Mitake
Madam
Department of Computer Engineering

Government Polytechnic, Malvan
A/P- Kumbharmath, Tal- Malvan, Dist- Sindhudurg 416606
(Academic Year 2020-2021)
Government Polytechnic, Malvan
Department of Computer Engineering.
CERTIFICATE
Certified that the project report entitled “Develop a
smartphone specification website”has been
successfully completed by: -
1.Baburav Arun Mestry.

2.Pratik Prasad Korgaonkar
3.Sahil Sunil Gaonkar
As a partial fulfilment of Diploma Course Computer Engineering

under the Maharashtra State Board of Technical Education,
Mumbai during the Academic Year 2020-2021.
The said work has been assessed by us and we are satisfied that
the same is up to standard envisaged for the course, and the said work
may be presented to the external examiner.
Mrs.T.V.Mitake Madam Mrs.T.VMitake Madam Dr. S.A.Patil
(Project Guide) H.O.D. Principal

PLAN A
• 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
• 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 Baburav,
micro-project. Pratik, Sahil
2. Collect 09/01/21 13/01/21 Baburav,
information about Pratik, Sahil
topic.
3. Prepare report on 28/01/21 02/02/21 Baburav,
project submit the Pratik, Sahil
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-links{
Flex: 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{
Width: 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;
}.four{
Bottom: 150px;
Right: 350px;
}
.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 :-

CSS Microproject Report2

Uploaded by

Copyright:

Available Formats

CSS Microproject Report2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Microproject Report2

Uploaded by

Copyright:

Available Formats

A

Maharashtra State Board of Technical Education, Mumbai

Roll No. 3239 Baburav Mestry

Under the Guidance of

Department of Computer Engineering

1.Baburav Arun Mestry.

As a partial fulfilment of Diploma Course Computer Engineering

Mrs.T.V.Mitake Madam Mrs.T.VMitake Madam Dr. S.A.Patil

(Project Guide) H.O.D. Principal

• Title of Micro-project :- Develope a smartphone

• Brief Introduction :- In this project we have developed a

• Aim of the Micro-project :- To Study How to Create

• Title of Micro-project :- Develope a smartphone

• Brief Introduction :- In this project we have developed a

• Aim of the Micro-project :- To Study How to Create

• Actual Methodology followed :-

Sr. Name of specifications Qty Remark

<div class=”feature one”>

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

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

Var rotateValue = circle.style.transform;

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

Background: linear-gradient(to right , #9c27b0, #8ecdff);

Border-top: 500px solid #fff;

You might also like