Abstract
Title: Develop a Smartphone Specification Website
Summary:-
This micro-project involves creating a smartphone specification website using HTML, CSS, and
JavaScript. The project leverages JavaScript to make the website interactive and user-friendly, ensuring
that visitors can easily understand the content. It provides an engaging interface for displaying details
about smartphones, such as camera features, processor specifications, display characteristics, and battery
life.
Objective:-
To explore and apply skills in HTML, CSS, and JavaScript for designing an interactive and visually
appealing website dedicated to smartphone specifications.
Outcome:-
Participants learned to build interactive web pages, integrate JavaScript for enhanced functionality, and
design a responsive layout using CSS. This experience also helped in understanding the structured process
of developing web applications, from concept to completion.
Page | 1
Introduction
This project focuses on designing and implementing a smartphone specification website using HTML, CSS,
and JavaScript. The website is crafted to be user-friendly and visually appealing, leveraging JavaScript to
enhance interactivity and ease of navigation. The primary objective is to create a platform where visitors can
effortlessly access and comprehend smartphone specifications. Through this project, the aim was to explore and
understand the practical aspects of web development, including layout design, styling, and adding dynamic
features using JavaScript.
Page | 2
Annexure – I
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
Resources Used :-
Name of
Sr. No. Specifications Qty.
Resource/material
1 for 1
1 Computers System Desktop
student
1 for 1
2 Software VS Code
student
Action Plan :-
Name of
Planned Planned
Sr. No. Details of Activity Responsible
Start date Finish date
TeamMembers
Discussion and Finalization of 01-09-24 03-09-24 Mohammad Yusuf
1
the Project Title Siddique
04-09-24 06-09-24 Mohammad Yusuf
2 Preparation of Abstracts
Siddique
07-09-24 09-09-24 Mohammad Yusuf
3 Literature Review
Siddique
4 Collection of Data
10-09-24 15-09-24 Mohammad Yusuf
Siddique
5 Discussion and Outline of 16-09-24 17-09-24 Mohammad Yusuf
Content Siddique
6 Rough Writing of the Projects 18-09-24 20-09-24 Mohammad Yusuf
Contents Siddique
7 Editing and Proof Reading of 21-09-24 24-09-24 Mohammad Yusuf
the Contents Siddique
8 Final Completion of the Project 25-09-24 01-10-24 Mohammad Yusuf
Siddique
Page | 3
Annexure – II
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
Resources Used :-
Name of
Sr. No. Specifications Qty.
Resource/material
1 for 1
1 Computers System Desktop
student
1 for 1
2 Software VS Code
student
Page | 4
• 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>
Page | 5
</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>
Page | 6
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>
Page | 7
• 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
{
Page | 8
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:
Page | 9
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
Page | 10
{
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
Page | 11
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: translate
50%); z-index: 1;
.controls
Position:
absolute;
Right: 10%;
Top: 50%;
Transform: translateY(-50);
Page | 12
.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:
Page | 13
aboslute;
Left: 0;
Top: 0;
• Output
Page | 14
Page | 15
Conclusion
The micro-project, "Develop a Smartphone Specification Website," successfully demonstrated the
process of creating an interactive website using HTML, CSS, and JavaScript. Through this project, we:
• Gained practical experience in designing and implementing responsive web interfaces.
• Learned to enhance website usability with JavaScript, making it user-friendly and visually
appealing.
• Developed skills in integrating HTML, CSS, and JavaScript for a cohesive web design.
This project provided valuable insights into web development and equipped the team with
foundational skills for building interactive web applications. Overall, it was a rewarding experience that met
the outlined objectives and contributed to our learning outcomes.
Reference
1. https://www.w3schools.com/js/js_datatypes.asp
2. https://www.tutorialspoint.com/index.htm
3. https://www.javatpoint.com/
Page | 16
